Animations & effects that make your eStage site stand out

Give my hero section a layered glow background instead of a flat color: stack two large, soft radial gradients over the base background color — one in my primary brand color anchored near the top-right, one in a secondary brand color anchored near the bottom-left, both fading to transparent by 60-70%. Use CSS color-mix with my existing theme tokens (15-20% strength for full-width sections). No image files.

Add a film-grain texture overlay to my large colored background sections: an absolutely-positioned overlay (inset 0, pointer-events none) whose background-image is an inline SVG using feTurbulence fractalNoise (baseFrequency ~0.65-0.9, 2 octaves), blended with mix-blend-mode overlay or soft-light. For a subtle production look use 30-40% opacity at natural tile size; for a chunkier filmic look, upscale the tile with background-size and raise the opacity. The parent needs position: relative and overflow: hidden.

Replace the flat box-shadows on my cards and primary buttons with layered, color-tinted shadows: stack (1) a tight 1-2px contact shadow in my darkest brand color at ~10-30% opacity, and (2) a large soft shadow (e.g. 0 18px 44px -14px) tinted with my primary brand color at ~40% opacity. Build the colors with color-mix from my theme tokens. Never use a single flat gray shadow.

Give my hero's decorative brand image two motion layers: (1) a slow float — a 5s ease-in-out infinite keyframe animation drifting it a few pixels up and down with a tiny rotation; (2) scroll parallax — on scroll, translate it vertically by about -0.12x its distance from the viewport center, updated inside requestAnimationFrame with a passive scroll listener, using translate3d. Both effects fully disabled under prefers-reduced-motion.

Add a scroll-reveal animation to the main sections of my page: each section starts at opacity 0 and translated down 18-40px, then transitions to full opacity and its natural position over 1.5-2s with a soft ease-out (e.g. cubic-bezier(0.16, 1, 0.3, 1)) when it first scrolls into view — slow enough to feel like it floats in, not pops in. Use an IntersectionObserver (threshold ~0.15) that adds an "is-visible" class. Animate ONLY opacity and transform. Under prefers-reduced-motion, show everything immediately with no animation.

Add hover micro-interactions to every clickable element on my page: buttons lift 2px (translate-y) with their shadow deepening and background shifting to the hover shade, cards lift 4-6px with a subtle brand-tinted border appearing, and active/pressed states push 1px down. Transitions 150-300ms. Animate only transform, opacity, and colors — never transition-all. Every element also needs a visible focus-visible outline for keyboard users.

Animate my logo mark's segments with a slow "breathe": each segment pulses between normal and ~1.4x brightness (or between its base brand color and a brighter shade) over 6 seconds, ease-in-out, infinite — and stagger each segment's animation-delay by 1.5s so the pulse ripples across the mark instead of blinking together. Disable entirely under prefers-reduced-motion.

Add a typewriter effect to my hero headline: a fixed lead-in ("Build a business that") followed by a rotating typed phrase cycling through 3 short endings I'll give you. Type at ~65ms per character, hold the completed phrase 1.5s, delete at ~30ms per character, then type the next. Add a 2px blinking caret (1s step blink) after the text. Under prefers-reduced-motion, show the first phrase complete with no typing and no blink.

Make the statistics on my page count up from 0 to their real values when they first scroll into view: use an IntersectionObserver (threshold ~0.5) to start, animate over ~1.3s inside requestAnimationFrame with a cubic ease-out so the number sprints early and lands softly, and format with thousands separators. Run once per page load. Under prefers-reduced-motion, show the final numbers immediately.

Add an infinite marquee strip to my page showing a row of short items (logos or phrases): render the list twice inside a flex track with width: max-content, animate the track with a linear infinite keyframe translating X from 0 to -50% (30-40s per loop for a calm pace), wrap it in an overflow-hidden container, and pause the animation on hover (animation-play-state: paused). Disable under prefers-reduced-motion.

Add a shimmer effect to one key phrase in my hero headline: set the phrase's background to a linear gradient of my text color with a narrow band of my primary brand color in the middle, background-size ~220% 100%, clip it to the text (background-clip: text with transparent color), and animate background-position across it on a slow 3-4s linear infinite loop. Apply to ONE phrase only. Under prefers-reduced-motion, stop the animation (the static gradient is fine).

Make my FAQ accordion expand smoothly instead of snapping: wrap each answer in an outer div with display: grid and grid-template-rows animating between 0fr (closed) and 1fr (open) with a 0.35s ease transition, and an inner div with overflow: hidden. Rotate the + icon 45 degrees on open with the same duration. Set aria-expanded on the question button for accessibility.

Add a confetti burst to my success moment (order confirmation / signup): on trigger, spawn ~60 small rectangles at the event point on a full-area <canvas>, each with a random outward velocity (2-7 px/frame), slight upward bias, gravity (+0.12 vy per frame), random rotation and spin, in 3 of my brand colors; fade each piece out over ~80 frames and remove it. Clear and redraw in requestAnimationFrame; stop the loop entirely when no particles remain. Skip the effect under prefers-reduced-motion (show a static success state instead).

Add a cursor spotlight to my dark cards: an absolutely-positioned overlay whose background is a ~180px radial gradient circle in my primary brand color at ~25% opacity, centered on the cursor's position within the card (track mousemove and update two CSS custom properties --x and --y). The overlay has pointer-events: none and the gradient fades to transparent by 75%. Park the spotlight off-card on mouse leave. Skip on touch devices and under prefers-reduced-motion.

Make my primary CTA button magnetic: track mousemove on a padded wrapper around the button, translate the button toward the cursor by ~15% of the cursor's offset from the button center, clamped to about 10px horizontally and 8px vertically, with a fast linear transition while moving. On mouse leave, spring it back to center with a 0.4s cubic-bezier(0.2, 1, 0.3, 1) ease. Apply to ONE button per view. No effect on touch devices or under prefers-reduced-motion.

Give my featured card an animated gradient border beam: an outer wrapper with overflow hidden, rounded corners, and ~1.5px padding; inside the wrapper, a ::before pseudo-element much larger than the card (inset: -150%) whose background is a conic-gradient that is transparent for most of the circle with a bright segment in my primary brand color, rotating with a 3-4s linear infinite spin animation; then the inner card with its own solid background and slightly smaller radius sits on top, so only the 1.5px border ring shows the moving gradient. Disable the spin under prefers-reduced-motion.

Add a scramble/decode effect to one short headline: on first view, every character displays random symbols from a set like !<>-_\/[]{}=+*^?# and re-randomizes every ~40ms, while the real characters lock in progressively from left to right over about 1.4 seconds (spaces always stay spaces). Use a monospace font so nothing shifts while scrambling. Run once when the element first scrolls into view. Under prefers-reduced-motion, show the final text immediately.

Make my feature list cascade into view: each list item starts at opacity 0 and translated down 18px, then transitions to visible over ~1s ease — with each item's transition-delay increasing by ~350ms (item index × 0.35s) so they clearly arrive one after another, unhurried. Trigger the whole cascade with a single IntersectionObserver on the list container (threshold ~0.4). Under prefers-reduced-motion, show all items immediately.

Add a self-drawing underline beneath one key phrase in my headline: an inline SVG with a slightly curved path (e.g. M4,7 Q70,1 216,5 in a 220x10 viewBox) stroked in my primary brand color, ~3px width, round linecap. Set stroke-dasharray to the path length and stroke-dashoffset to the same value so it starts invisible; when the phrase scrolls into view, transition stroke-dashoffset to 0 over ~1.1s ease so the line draws left to right. Under prefers-reduced-motion, show it fully drawn.

Add a testimonial rotator to my page: show one quote (with attribution) at a time from a list I'll provide, and every ~3.5 seconds fade the current quote out (opacity to 0, translateY 8px, 0.35s ease), swap the text, and fade the next one in. Fix the container's min-height to the tallest quote so the page never shifts. Pause rotation while hovered. Under prefers-reduced-motion, swap the quotes instantly with no fade.

Add a reading progress bar to my long-form pages: a fixed 3px-tall bar at the very top of the viewport (z-index above the header) in my primary brand color, whose width tracks scroll progress from 0% at the top of the page to 100% at the bottom — computed as scrollY divided by (document height minus viewport height), updated inside requestAnimationFrame from a passive scroll listener. It should sit on a transparent track and never intercept clicks.

Make my pricing cards flip in 3D on click/tap: a parent with perspective ~900px; the card itself has transform-style: preserve-3d and rotates rotateY(0deg) to rotateY(180deg) over 0.6s with a springy cubic-bezier ease; front and back faces are absolutely positioned with backface-visibility: hidden, the back face pre-rotated 180deg. Toggle on click so it works on touch devices too, set aria-pressed for accessibility, and skip the rotation animation (instant swap) under prefers-reduced-motion.

Add a click ripple to my buttons: on click, inject a small absolutely-positioned circular span at the exact click coordinates inside the button (which has overflow: hidden and position: relative), in my primary brand color at ~50% opacity; animate it scaling up ~14x while fading to 0 over 0.65s ease-out, then remove the span. Multiple rapid clicks each get their own ripple. Disable under prefers-reduced-motion.

Give my hero section an aurora background: a linear-gradient at ~115deg through 3-4 of my brand colors (each mixed toward my dark base color with color-mix so nothing is neon), background-size 300% 300%, and animate background-position from 0% 0% to 100% 100% over ~12s, ease-in-out, infinite alternate. It should read as slowly shifting atmosphere — if the movement is noticeable at a glance, slow it down. Freeze it under prefers-reduced-motion.

Add toast notifications to my page's actions (form saved, added to cart, copied): a small card fixed to the bottom-right with a status dot, message text, border and tinted shadow matching my theme; it enters by fading in and translating up 12px with a springy 0.3s ease, stays ~2.5 seconds, then fades back out; re-triggering resets the timer. Give it role="status" so screen readers announce it, pointer-events none, and skip the slide (fade only or instant) under prefers-reduced-motion.

Add skeleton loading states to my cards and lists: while content loads, render gray placeholder blocks (rounded, in my muted theme color) matching the final layout's exact shape and sizes, each with a shimmer — an ::after overlay with a soft light linear-gradient band that sweeps left to right on a 1.4s ease-in-out infinite loop (translateX from -100% to 100%, parent overflow hidden). Fade the real content in over 0.4s when it arrives. Under prefers-reduced-motion, show static placeholders with no sweep.

Add a marker-highlight sweep to one key phrase: give the phrase's span a background-image of a flat band in my primary brand color at ~45% opacity, background-repeat no-repeat, positioned at the lower ~40% of the text (like a highlighter stroke), with background-size animating from 0% 40% to 100% 40% over ~0.9s ease when the phrase first scrolls into view (IntersectionObserver). Under prefers-reduced-motion, show it fully highlighted.

Add an attention ping to my notification badge: two stacked circles — a solid dot in my primary brand color, and behind it an identical circle that scales from 1x to ~2.6x while fading to 0 opacity on a 1.6s cubic-bezier(0, 0, 0.2, 1) infinite loop. Keep it small (12-14px dot). Use it on at most ONE element per page. Disable the pulse under prefers-reduced-motion (keep the static dot).