Motion Effect Components

All motion effects in Nexus UI

• Scroll Progress Bar

  A minimal vertical progress rail that fills smoothly as a target section moves through the viewport or a scrollable container.

• Cursor Text Reveal

  An immersive cursor-following spotlight that reveals alternate text, gradients, or imagery beneath perfectly aligned headline layers.

• Word Magnet

  Cursor-reactive text where whole words gently repel from the pointer and spring back without splitting letters.

• Real-Time Cursors

  Collaborative workspace preview with animated teammate cursors, code review cards, and simulated live presence trails.

• Tracing Spotlight Panel

  Cursor-traced highlight for feature callouts and pricing tiers.

• Gooey Search Input

  Expandable pill search with a detached icon bubble merged through an SVG goo filter and spring layout.

• Interactive Terminal

  macOS-style terminal window with typewriter commands, cursor blink, output sequencing, and optional sound.

• RippleLine squiggly text

  Hero-grade headline with an animated wave underline, turbulence + Gaussian blur + displacement, optional glyph micro-warp, and reduced-motion fallbacks.

• Stateful message button

  Animated async button with idle → loading → success transitions, built-in click guarding, and smooth icon/text motion.

• Sparkles field

  Configurable animated particle field for hero highlights, card backgrounds, and decorative UI layers with optional pointer interaction.

• Text Generate Effect

  Animated text reveal that fades words, characters, or lines into view with optional blur and upward motion.

• Typewriter Effect

  Character-by-character typewriter text animation with blinking cursor, optional deleting, looping, and semantic heading support.

• Infinite Moving Cards

  Customizable infinite marquee of cards with seamless looping, direction controls, hover pause, and optional custom rendering.

• Encrypted Text

  Characters shuffle through gibberish before locking into the final string — a futuristic cyber decoding reveal for hero headings, buttons, badges, and nav links.

• Mac Keyboard

  Fully interactive Mac-style keyboard with Web Audio synthesised click sounds, Framer Motion keycap animations, and real-time physical keyboard highlighting.

• Images Badge

  Stacked avatar/image pill that fans open on hover — ideal for team badges, social proof, avatar groups, and template galleries.

• Before / After Compare

  Drag a vertical handle to compare two images side-by-side. Supports mouse and touch, optional labels, custom start position, and any aspect ratio.

• Animated Select Headline

  A cycling word headline where each active word is highlighted with a Figma-style selection rectangle — thin border with corner handles — using blur-fade transitions.

• Warp Speed Card

  A focused warp-speed effect — hover a single phrase to reveal a dark space scene with streaking beams confined to the text's bounding box. The text itself stays static; the effect lives entirely behind it.

• Scroll Reveal Text

  Scroll-linked text reveal where words, characters, or lines emerge from muted gray to bright white with optional blur dissolve and staggered cascade.

• Animated Countdown

  Flip-style countdown timer with four variants — modern, digital, minimal, and classic. Smooth number transitions powered by Framer Motion.

• Hover Highlight Text

  Cursor-tracked SVG spotlight that reveals outlined text beneath a base layer. Smooth spring physics follow the mouse for a cinematic hover effect.

• Motion Layer Scroller

  Scroll-driven parallax depth engine — each layer moves at an independent speed and axis as the user scrolls. Compose scenes with overlapping planes.

• Command Palette

  Animated command palette with ⌘K shortcut, grouped navigation/actions/theme commands, backdrop blur overlay, and Framer Motion enter/exit transitions.

• Image Trail

  A cursor trail that cycles through a configurable image array as you move, with fade-blur transitions and an optional magnetic repulsion effect.

• Avatar Group

  Overlapping avatar stack with per-avatar entrance animations (flip, slide, scale, bounce), four hover styles, name tooltips, and automatic color-coded fallback initials when no image is supplied.

• Link Preview

  Hover-triggered image tooltip that transforms inline text links into cinematic visual previews. Spring-animated entrance with blur, scale, mouse-tracking tilt, and a soft floating glide — perfect for blogs, portfolios, and product pages.