Swing In Work Grid

A work index where each row swings into place. Cards start a thousand pixels low and rotated sixty degrees, mirrored left against right, so a row reads as two panels hinging shut. The row fires once when it reaches mid viewport and the pair lands on a quarter second stagger, which keeps the second card still turning as the first settles. GSAP ScrollTrigger with Lenis.

Component

Featured Work

Silent Form

Exploring movement against open light

Golden Hour

Portraits shaped by warmth and shadow

Redline

Cycles of speed and intensity

Verdant Studio

A brand identity in deep green

Crimson Tool

Minimal object framed in red velvet

Moonstairs

Architecture under quiet light

Backlit Figure

Silhouettes cut against color

Palm Study

Natural light and textured skin

Terra Seat

Earth tones in crafted design

Atelier Meridian

A living space, curated and minimal

Install

npx shadcn@latest add https://ui.aryank.space/r/swing-in-work-grid.json

Installs from ui.aryank.space. To add it by hand, copy the files in Usage below, or register the @compronents namespace via the docs.

Files

API

Prop	Type	Default	Description
projects	WorkProject[]	Ten BLANK projects	Name, description, image, and route. Projects are paired into rows automatically.
heading / footerLeft / footerRight	string	BLANK copy	Page heading and the two footer lines.
embedded	boolean	true	Own the scroll container so it fits a bounded box. Set false to drive it from the window scroll.

Customize

projectstext

Project names, descriptions, images, and routes.

Dependencies

gsaplenis