Motion-first React primitives and animated UI components for shadcn/ui. Copy, customize, and ship fluid interfaces.
Base UI accordion with separated card-style items.
A loading placeholder with shimmer or fade variants, plus a transition that crossfades into real content once loading finishes.
A profile card loading, then crossfading into content once ready.
Skeleton loading placeholders with a shimmer effect that transitions to revealed content via a CSS view-transition wipe animation. Skeletons are sized using placeholder data to reduce layout shifts.
Standard skeleton shimmer loading state with blocks and overlay without View Transitions API.
Skeleton loading card that wipes away to reveal a profile card once content is ready.
A chip-style call-to-action link with a Motion-powered sliding label and rotating icon chips on hover.
A button that staggers per character or slides the whole label on hover, with a scaling background layer.
Scroll-pinned hero where a front card flips to reveal a stack of back cards, dismissed one at a time as you keep scrolling.
Front card flips to reveal 4 stacked back cards that dismiss one at a time as you scroll.
Cycles through a list of words with a per-character collapse/reveal transition and a trailing cursor glyph that wipes across the text between words.
The anime.js hero line, with the cursor flashing red only while collapsing/revealing.
Preset-driven staggered text reveals with blur, fade, slide, and scale animations, powered by Motion.
Scroll-triggered text reveal with blur, fade, slide, and scale presets.
Cycles through a list of items with an enter/exit animation, powered by Motion.
Cycling headline built with TextLoop.
Per-character layout morphing for labels, counters, and live text swaps, powered by Motion.
Continue / Confirm pill button with per-character layout morph.
Live text morph driven by a controlled input.
Line-by-line text reveal with a colored block wipe, powered by GSAP SplitText.
Scroll-pinned word-by-word text reveal with a highlight flash, powered by GSAP ScrollTrigger.
Scroll-pinned manifesto copy with word-by-word highlight reveal.
A scroll-triggered masked slide-up text reveal animation, powered by Motion.
Scroll-triggered masked text reveal with rich text emphasis.
A per-character vertical text roll animation for label swaps and micro-interactions, powered by Motion.
Interactive copy button with chromatic text roll feedback.
A text scramble reveal animation that decodes characters on mount or when re-triggered, powered by Motion.
3D tilt card that rotates toward the cursor on spring physics, with an optional glare reflection.
Card tilting toward the cursor with layered depth content.
Image card with a subtle reversed tilt.
A character-by-character reveal where each glyph ripples through randomized pill, accent, and outline states before settling into plain text. Adjacent same-state chars merge into rounded bars, and it's themed entirely through CSS variables.
A stacked headline that cascades in line by line, each character rippling through pill and accent states before settling into plain text.
A hook that allows you to automatically adjust the height of an element based on its content.
A hook that allows you to control a state.
A hook that tracks the OS-level Reduced Motion setting live, so GSAP-driven primitives can skip or shortcut their animations.
Dependency-free custom video player: modal overlay, chaptered timeline, hover-scrub preview, speed menu, picture-in-picture, fullscreen, keyboard shortcuts, and focus trapping.
Trigger button that opens the modal video player with a sample chaptered video.