Animated React components built with Tailwind CSS, Motion and GSAP, installable with the shadcn CLI.
Cards that travel along a semicircle as you scroll, entering at the bottom right and leaving at the bottom left.
A portfolio hero: project cards on the arc, with a pinned headline and a caption for the project at the top.
Eight cards on an arc, driven by scrolling inside the box.
Wide quote cards with tilt turned off so the text stays level, plus page dots.
A company history with tighter spacing, the current year highlighted and a year rail that follows along.
A cursor that uses your product on its own. It glides to buttons and presses them, types and drags across real markup on a script you write, and steps aside the moment a visitor wants to try it.
An AI agent books a meeting in a calendar built from plain markup. It opens a new event, names it, finds a free slot, picks a guest from the autocomplete and sends the invite, narrating each step in its label. Move your mouse in or tab into it and it steps aside to the corner set with `park`; leave, and two seconds later it replays the chapter it was in.
Two teammates on a design canvas, with their steps running at the same time. Maya drags the Features frame into place, and its snap guides show through `data-autopilot-drop`, while Leo drops a comment pin and asks a question. Then Maya replies and Leo likes it. Move your mouse in and both step aside, and the canvas is yours: drag the frame or leave a comment.
A SaaS app sets up a project in three clicks, one chapter each, with `chapterStrip` showing Create, Invite and Ship underneath. Click a chapter to jump there, or pause from the strip. On a phone, tap the app to take over and press Resume to hand it back.
A finished layout that builds itself. It starts as a wireframe measured from your real markup, then fills in block by block: text streams in, photos come into focus, buttons pop up. Scrub back and it comes apart again.
An analytics assistant answers with a dashboard card. KPIs count up through `data-blueprint-count`, chart bars grow from even placeholders into their real heights through `--blueprint-progress`, and table rows fill in cell by cell. Drag the scrubber to take it apart and put it back.
An AI site builder's hero. A prompt types itself into the field, Enter goes down, and the field docks in the corner as the page builds beneath it. Each loop is a new prompt with different copy, colors and photos in the same layout, swapped in through `onLoop`, so the same wireframe turns into a different site. Hover to pause it.
A case study that goes from an annotated blueprint to the finished design as you scroll, with `play="manual"` following `useScroll`. `data-blueprint-order` groups the build into type, imagery and surfaces, and `onBlockChange` lights up the matching stage in the rail. Scroll back up and it comes apart.
A curtain that covers the page while it loads, counting from 0 to 100 with the fonts and hero images, then lifts as the headline rises out of its masks underneath, on one clock.
The default counter set in serif on a stone curtain that slides off to the left. It waits for the three photos to load and decode, so they're sharp from the first frame.
A custom counter in the drop's colors, with a padded number and a progress bar, on a curtain that falls away. `onComplete` starts the countdown as it goes, so the clock is already ticking when it's uncovered.
The default counter over a studio's home page. The nav, headline, links and photo each rise as the curtain clears them. Press reload in the address bar to play it again.
A card that opens into a full article, growing from its place in the page to fill the screen, and shrinks back into its slot when you pull it down, like the App Store's Today tab.
Each post has its own link. Opening one updates the URL, the back button closes it, and loading a post's link opens it directly. The notes load while the cover grows.
Product cards that open into a product page with close-ups and a size picker. Add something to the bag, then pull the page down to watch the count behind it change.
Three stories in different styles: a full-bleed photo, a top-five list and a bold card on a gradient. Tap one, then pull it down from the top, or press Esc, and it lands back in its slot.
A headline with a small video set between its words. As you scroll, the window opens until it fills the screen, pushing the words off its edges.
A conference hero with an aftermovie and a bolder headline. The date and city chips live inside the halves, so they fly off with the words.
An app screenshot instead of a video, built in markup so it stays sharp full screen. A "Watch the demo" button appears once it fills the box.
A motion studio's showreel opens out of the headline. Once it fills the box, a button plays the film full screen.
A product screenshot that comes apart into its layers as you scroll, explains each one, then clicks back together. The layers are real HTML, so text stays sharp and follows your theme.
The layers don't have to be UI. Four plain planes, from your app down to the database, that stay open at the end. Each carries its name on its front edge, the strip that stays in view.
A dashboard comes apart into its shell, sidebar, live cards, command menu and a teammate's cursor, walks through each one, then lands back as the screenshot it started as. Hover a layer once it's open, or click a label to jump to it.
A page lifts off the components it's built from, which lift off the tokens under them. Numbered labels, with the active layer's description under the stack.
A list of names that opens a photo at the pointer. It trails the cursor with a little weight, leans as it moves, and wipes to the next photo from the direction you travel, like flipping through prints.
A studio's work index. Point at a project: its photo opens at the pointer and trails it. Move down the list and each photo wipes in from the top; move up and it comes from the bottom. Sweep fast to flip through them. Tab through the rows to see each photo without a mouse.
An archive of essays with dates and reading times. Each title shows its cover image in a wide 3:2 frame.
Names and roles, with a portrait on hover. The frame is taller and rounder, and leans a little less.
A page-load intro that counts to 100 with the real loading while a flipbook of your work plays in a small frame, then grows the last image into its place on the page. It doesn't fade out: its last frame is the page's first.
A season label instead of a number, and a tall frame for the looks. The last look lands as the half of the page beside the headline.
A studio's home page. Four projects flip past in the frame, then the fifth grows into the full-bleed hero, and the headline rises over it. Press reload in the address bar to play it again, or click to skip.
No images. The wordmark rises a letter at a time as the count runs, then shrinks and flies into the logo's spot in the header. The target can be anything.
A search button that stretches into a search field, with results unfolding underneath as one shape, and shrinks back into the button when it closes.
An app's command menu. The trigger travels to the middle of the screen, with grouped commands and their shortcuts. Opens with ⌘K.
A docs header with a fake search field that becomes the real one. Press / to open it from anywhere.
A search button in a site header. It grows into a field with popular pages underneath; pick one to go there.
A number that rolls each digit on its own wheel, up when the value grows and down when it shrinks, and slides new digits in as the number gets longer.
Currency with cents, a count, a percentage and milliseconds. The range switcher makes big jumps in both directions; between them the numbers drift live while the cards are on screen, and the delta chips flip color and arrow with their sign.
Step the number up and down. Wheels roll the way the value moves, only the digits that change turn, and 999 → 1,000 widens as the new digit and comma roll in. Click fast: they redirect mid-roll.
A rupee fundraiser that keeps ticking up. Switch between the Indian system of lakhs and crores (₹2,45,67,890) and international thousands (₹24,567,890): the commas roll to their new places while every digit stays put.
A band of headline numbers that roll up from 0 the first time they scroll into view, one after another.
Monthly and yearly plans. Prices roll down to the yearly rate and back up, the yearly total rolls down from a year of monthly bills, and Starter's $0 never moves.
A whole archive in one thin strip, with a playhead that walks along it as you scroll. Whatever's under the playhead opens into a loose collage, and the ruler below is a scrubber you can drag.