Creators may embed this optional badge in a repository or project page. It points directly to this product; no backlink is required, and the supplied link is nofollow by default.
Related products
More production-ready assets in the same category.
A fanned arc of team photos that springs into a curve when it scrolls into view. On hover the focused card straightens and pops forward while the rest fall back, and a name/role plate slides up. Self-contained, light & dark.
React
TypeScript
framer-motion
A playful team showcase. The photo cards spring out from the center into a fanned arc when the section scrolls into view, each staggering in with a spring. Hover any card and it straightens and pops forward while the others dim and fall back, and a name/role plate slides up from the bottom. Fully configurable spread, curve and fan angle. Ships as a single self-contained file (injects its own CSS, no Tailwind required), works in light or dark, React 19 + TypeScript strict, and is reduced-motion aware. Requires framer-motion.
A bold, playful marketplace landing hero: grid-lined electric background, navbar, massive layered typography with a hard offset shadow, floating seller cards that bob, hand-drawn arrows, a spinning "start selling" badge and a rounded features section.
React
TypeScript
framer-motion
A high-impact landing hero for a marketplace or creator platform. It layers a grid-lined electric-blue background, a navbar, huge stacked typography with a chunky offset shadow, glassy floating "seller" cards that gently bob with framer-motion, hand-drawn SVG arrows, a spinning circular "start selling — free" badge, and a rounded three-up features section (list, price, get paid). Self-contained (injects its own CSS, no Tailwind required), responsive and reduced-motion aware. React 19 + TypeScript strict. Requires framer-motion.
An interactive skewed grid background: cells light up in a palette color under the pointer and fade back over seconds, leaving a trail of light, with a radial mask blending the grid into your hero. Self-contained, framer-motion.
React 19
React
TypeScript
Background Boxes puts a living, perspective-skewed grid behind your hero content. As the pointer moves, each cell it passes snaps to a color from the palette and then fades back over a couple of seconds, leaving a trail of light. A radial mask fades the grid into the background at the edges so your text stays readable.
Ships two pieces: Boxes (the raw grid, memoized so parent re-renders never reshuffle the random cell colors) and BackgroundBoxes (a ready hero with the mask and a content slot). Self-contained CSS injected once (no Tailwind required); className merging via clsx + tailwind-merge. React 19 + TypeScript, prefers-reduced-motion aware. Original work for Assetzaar.
Isometric "impossible" text that rolls up on hover. Each line is skewed into an isometric block and staircased; on hover GSAP slides every line up one step so the whole phrase rolls to the next word. Themeable and responsive.
What is this component?
A hypnotic hero-text effect. Each line of the phrase is skewed into an isometric block and clipped so only its top word shows, then offset into a staircase. On hover (or focus) GSAP slides every line up one step with a stagger, so the whole phrase rolls to the next word — and reverses smoothly on leave. Pass a phrase via words, or take full control with explicit top/bottom lines. Responsive font sizing, custom color for dark backgrounds, React 19 + TypeScript strict, and prefers-reduced-motion aware. Requires gsap.
What's included
GSAP roll-up animation
Phrase or explicit lines
Responsive font sizing
Custom color for dark backgrounds
Reduced-motion aware
Requirements
So it renders exactly like the preview.
1. Install dependencies
npm install gsap
Details
React
TypeScript
GSAP
Text effect
Animation
Hero
Category
Text Effects
Framework
React 19
Dependencies (npm)
gsap
Updated Jul 4, 2026
Security scanclean
MaintainedYes
Computed from real data — the same states coding agents read in this product's manifest.
