Pricing Interactions

Krasimir Stoimenov kstoimenov.com/pricing

Design type: Animated pricing page micro-interactions
Page tags: pricing faq accordion hover dark motion custom cursor text reveal floating nav micro-interactions
Site tags: dark portfolio motion webgl
Vocabulary: line-by-line masked text revealcustom circular cursor with plus glyphpill button hover fillfloating glass pill navigationaccordion with plus-to-minus togglesingle-open accordionheight-animated answer paneldrifting line-art backgrounddark-to-light section transitionsocial tile gradient hover fillblurred aurora footer glowneon green accent
Prompt: Show prompt
Add a motion layer to a dark pricing page (bg #121212, text #f2f2f2, hairlines #2a2a2a, accent green #4ade80 to #a3f07a). Motion to build: - Intro: hero headline "[Headline line 1] / [italic serif line 2] / [line 3]" reveals line by line. Each line slides up ~40px from behind an overflow-hidden mask with a slight per-word stagger (~60ms), ~700ms each, ease-out expo. Muted intro paragraph and pricing cards fade/rise in after (~200ms delay). Thin 1px outline curves in the background drift slowly with scroll (parallax, ~0.2 speed). - Custom cursor: replace the pointer with a ~44px circle, translucent green fill (#4ade80 at 30%) and 1px green ring, with a thin plus glyph. It follows the mouse with lerp smoothing (~0.15). Hide on touch devices. - Pricing cards: three plans ([Plan name], [Price]). On hover, the outline pill button fills to white with dark text (~250ms ease). The featured plan's button is already solid white. - Navigation: a compact pill nav ([Link], [Link], [Link], "[CTA] ↗") floats bottom-centre, with a frosted dark background (backdrop-filter blur 12px, 1px border). The active link has a subtle filled chip. It starts as a full-width bottom bar and condenses into the pill after scrolling past the hero (~400ms). - Scrolling from a dark section into a white "[Process]" section is a hard edge. Process rows fade up as they enter. - FAQ: full-width rows with hairline dividers, question left, thin plus right. Clicking opens one item at a time: the panel height animates (~350ms ease-in-out, grid-template-rows 0fr→1fr), the answer fades in, the plus becomes a minus, and the previously open item closes. - Footer: five bordered social tiles. On hover a tile floods with a green gradient (#22e03a→#b6f58c, ~200ms). Behind the footer, a blurred animated aurora of vertical green light streaks (WebGL or a CSS blurred gradient with slow horizontal drift). Use GSAP (or Motion) for the reveals and the cursor. Under prefers-reduced-motion: no cursor replacement or parallax, instant reveals, and accordions toggle without animating height.
Notes: Intro reveal, pricing card hovers, then FAQ accordion items opening.
Recording: 0:34
Added: 26 Oct 2026

Esc gallery · ← → pages