cnippet

In-container progress — gradient bar in card header scoped to a scrollable div

Styled bar with percentage — rounded gradient bar with live percentage label

Feature cards — three cards slide up and fade in with staggered delays on scroll

Feature section — image slides from left, text from right in a split layout

Stepped list — each item slides in from the left with incrementing delay

Feature list — each item slides in as the scrollable container is scrolled

Step-by-step process — numbered steps swap in as they cross the scroll threshold

Testimonial quotes — pull quotes scroll into view one at a time

Word marquee — continuous horizontal scroll of tech-stack words, speeds up on scroll

Opposing rows — two rows scrolling in opposite directions, velocity-reactive

Pill marquee — badge-style items scrolling continuously at a fixed speed

Increment/decrement — +/- buttons drive a single odometer display

Live clock — hours, minutes, seconds as separate padded sliding numbers

Pricing plan switcher — price and seat count animate on tier change

Badge ring — spinning label orbits a centered icon

CTA orbit — reversed ring around a clickable arrow button

Concentric rings — two rings at different radii, speeds, and directions

Hero headline — word-level slide-up with spring transition

Preset explorer — buttons switch all five presets on character-level split

Stacked content block — eyebrow, headline, body with different presets

Feature cards — three feature cards stack as you scroll through the section

Testimonial cards — customer quotes stack on scroll with subtle scaling

Process steps — numbered steps stack sequentially on scroll

Circular badge — text loops continuously around a circular path

Wave path — text flows along a sinusoidal wave in auto mode

Curved path with visible stroke — cubic Bézier with showPath for debugging

Scale — characters grow as cursor approaches with linear falloff

Opacity reveal — two hidden lines appear as cursor sweeps with gaussian falloff

Scale and color — characters grow and shift colour with exponential falloff

Hero headline — word-by-word blur-fade reveal for landing page headings

AI chat response — assistant card regenerates text on demand via trigger

Stacked content block — eyebrow, headline, and body with different stagger settings

Hero heading — violet to cyan looping gradient sweep

Inline word accent — single word with fast orange-to-green sweep inside static heading

Pricing cards — each tier has its own palette and speed

Scroll triggered — key phrase highlights ltr on viewport entry

Hover triggered — highlight fills in on mouse enter and resets on leave

Direction picker — buttons call ref to demonstrate all four sweep directions

Looping adjectives — cycles benefit words inline in a heading

Animated status badge — rich content items in a pill with slide transition

Horizontal slide — custom variants swap fade+y for a left-to-right slide

Word cycler — button group drives character-level morphing between words

Auto-cycling plan name — interval advances through strings in a card

Morphing placeholder — placeholder morphs character-by-character as user types

Hero headline — word-by-word fade-in-blur reveal

Character scale — letter-level scale reveal for short taglines

Stacked content block — eyebrow, headline, and body with sequential delays

Hero headline — letter-by-letter 3D roll reveal for a landing page heading