# Hyperiux Vault > Hyperiux Vault is a library of production-ready interaction effects for React and Next.js: scroll systems, text animations, cursor effects, page transitions, WebGL scenes, carousels, buttons, navigation, backgrounds and loaders. Every effect installs as editable source code with the hyperiux CLI. Hyperiux Vault is built by Hyperiux Immersion Labs Private Limited (Noida, India). Browsing and previewing need no account; copying or installing any effect, free or Pro, needs a free account, and the full library needs a Pro or Pro+ plan. Every effect ships as real source code (React components using GSAP, Motion, Three.js, or CSS) that developers own and customize - not a locked-in package import. Key facts: - Website: https://vault.hyperiux.com - Official information for AI assistants: https://vault.hyperiux.com/llm-info - Component catalogue: https://vault.hyperiux.com/ai-components (JSON: https://vault.hyperiux.com/ai-components.json) - Install CLI: `npx hyperiux init`, then `npx hyperiux add ` (every install needs a free account: `npx hyperiux login` first) - MCP server for AI coding tools: `npx -y hyperiux-mcp-server` (Claude Code: `claude mcp add hyperiux -- npx -y hyperiux-mcp-server`) - npm package: https://www.npmjs.com/package/hyperiux - Pricing: Free; Pro $27/quarter or $79/year; Pro+ $57/quarter or $179/year. Billed quarterly or yearly (no monthly plan); INR prices plus 18% GST - Templates: unlocked with template credits on Pro and Pro+, or bought individually - Licence: free effects are open source under MPL 2.0 (no attribution required); Pro effects use the proprietary Hyperiux Pro License. Each Pro or Pro+ subscription covers one seat - Requirements: React 18+ or Next.js 14+ (App Router or Pages Router); Vite + React projects work too; WebGL and 3D effects use React Three Fiber 9, which needs React 19 (Next.js 15+); Effects built on next-transition-router need the Next.js App Router; Tailwind CSS v3 or v4; Node.js 18.17+ (20+ recommended); npm, pnpm, yarn or bun; JavaScript or TypeScript (every effect ships .jsx and .tsx) Library size: 151 effects (56 free, 95 Pro) in 11 categories, and 4 templates. ## Text Animations (25) ### Blur Text - Slug: `blur-text` · Tier: Pro · Category: Text Animations - Install: `npx hyperiux add blur-text` - Docs: https://vault.hyperiux.com/effects/text-animations/blur-text · Live demo: https://vault.hyperiux.com/demo/blur-text - Dependencies: motion - Tags: Motion - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A soft text reveal animation that brings headlines, section intros, and short claims into focus with a calm blur-in effect. Best used for: - Calm hero lines and section intros where words should soften into view once. - Short claims where legibility matters more than spectacle. - Blur Text makes a short phrase arrive with timing while keeping the final text readable and indexable. Not for: Not for body text, labels, errors, legal copy, or anything a user must read right away. Accessibility and mobile: Make the whole phrase available to assistive technology a single time; where the text is split into per-character spans, mark the duplicates aria-hidden. Performance budget: Limit motion to the phrase that earns it, hold its layout space ahead of time, and keep heavy filters off large blocks of text. Common mistakes: - Using Blur Text on long body copy. - Removing the readable text from the DOM. - Letting split text cause layout shift. Props: - `delay` (number, default 0): Delay before the word animation starts. - `duration` (number, default 0.5): Animation duration per word. - `blur` (number, default 10): Initial blur amount in pixels. - `variant` (string, default "fade"): Direction variant for the reveal. - `once` (boolean, default false): Runs the reveal only once per viewport entry when enabled. - `textColor` (string, default "#111111"): Text color. Unset inherits from the surrounding text. Usage: ```jsx import BlurText from "@/components/effects/blur-text"; const Page = () => { return (
Blur should feel like a stage entrance, not a loading state.
); }; export default Page; ``` Related: Text Fill Animation, Animated Toggle, Character Trail ### Chromatic Text - Slug: `chromatic-text` · Tier: Free · Category: Text Animations - Install: `npx hyperiux add chromatic-text` - Docs: https://vault.hyperiux.com/effects/text-animations/chromatic-text · Live demo: https://vault.hyperiux.com/demo/chromatic-text - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A chromatic headline effect for portfolios, campaign pages, AI products, cyber brands, and experimental landing pages where the type should briefly distort without losing the message. Best used for: - AI, cyber, developer-tool, and experimental brand pages where RGB-split motion fits the visual language. - Portfolio and campaign headlines where type can carry a short optical distortion. - Dark hero sections where white typography and chromatic edges can create contrast. - Short headline moments that resolve quickly into readable text. Not for: Not for body copy, legal text, product instructions, forms, dashboards, documentation, pricing copy, or long paragraphs. Not for accessibility-critical wording or anything the user must read instantly. Distortion is an accent, not a reading strategy. Accessibility and mobile: Expose the headline once. Decorative RGB layers should not be announced as repeated text. On mobile, reduce blur, offset distance, and scroll-linked intensity. For reduced motion, show the resolved headline immediately with no channel travel, blur, or displacement. Performance budget: Limit the effect to one or two large headings, avoid heavy blur across large text blocks, throttle scroll-driven updates, and clean up listeners or animation instances on unmount. Keep channel offsets controlled so the effect feels sharp rather than smeared. Common mistakes: - Applying chromatic distortion to long copy. - Letting RGB offsets make the headline unreadable. - Duplicating text layers without hiding decorative copies from assistive technology. - Running scroll-linked updates without throttling or cleanup. - Using chromatic motion on a brand that needs calm clarity more than signal noise. Props: - `baseTextColor` (string, default "#ffffff"): Color of the front/base text layer. - `firstTextColor` (string, default "#FFB200"): Color of the red chromatic depth layer. - `secondTextColor` (string, default "#EB5B00"): Color of the blue chromatic depth layer. - `fontSize` (number, default 10): Font size in vw units shared by every text layer. - `fontWeight` (number, default 500): Font weight shared by every text layer. - `backgroundColor` (string, default "#111111"): Background color for the scroll section. Usage: ```jsx import ChromaticText from "@/components/effects/chromatic-text"; const page = () => { return ( <> ) } ``` Related: Mask Text Reveal, Glitchy Text, Drop Text, Text Stream ### Circle Text Reveal - Slug: `circle-text-reveal` · Tier: Pro · Category: Text Animations - Install: `npx hyperiux add circle-text-reveal` - Docs: https://vault.hyperiux.com/effects/text-animations/circle-text-reveal · Live demo: https://vault.hyperiux.com/demo/circle-text-reveal - Dependencies: motion - Tags: Motion - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A circular mask text animation that reveals short headlines, campaign lines, and proof statements through a focused shape-based entrance. Best used for: - Campaign moments where the circular mask is part of the art direction. - Short statements that can resolve fully without delaying reading. - Circle Text Reveal makes a short phrase arrive with timing while keeping the final text readable and indexable. Not for: Avoid it on body copy, labels, error and legal text, or any wording that has to be read on sight. Accessibility and mobile: Assistive technology should hear the phrase once, not character by character; visually split fragments are hidden from the accessibility tree with aria-hidden. Performance budget: Move only the words that carry weight, pre-reserve their space to avoid shift, and skip costly filters on large text blocks. Common mistakes: - Using Circle Text Reveal on long body copy. - Removing the readable text from the DOM. - Letting split text cause layout shift. Props: - `textColor` (string, default "#111111"): Base text color. - `circleColorBg` (string, default "#ff5f00"): Reveal circle background color. - `RevealedTextColor` (string, default "#fefefe"): Text color inside the revealed layer. - `lerp` (number, default 0.15): Pointer-follow smoothing amount; higher values track faster. - `smoothness` (number, default 0.5): Mask-size transition duration in seconds. - `circleSize` (number, default 500): Expanded reveal circle size in pixels. Usage: ```jsx import CircleTextReveal from '@/components/effects/circle-text-reveal' const page = () => { return ( <>
) } export default page ``` Related: Split Canvas, Circular Split Roll, Helix Slider, Parallax Image, Sticky Content Wrapper ### Depth Flip Text - Slug: `depth-flip-text` · Tier: Free · Category: Text Animations - Install: `npx hyperiux add depth-flip-text` - Docs: https://vault.hyperiux.com/effects/text-animations/depth-flip-text · Live demo: https://vault.hyperiux.com/demo/depth-flip-text - Dependencies: @gsap/react, gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A phrase-level text animation for hero headlines, product claims, campaign lines, and brand statements where the message needs motion without becoming a full carousel. Best used for: - Hero headlines where two to four short phrases need to share one visual space. - Product positioning statements that rotate between related claims. - Campaign pages where the headline needs motion without a full-screen transition. - Developer-tool, SaaS, AI, portfolio, and agency pages where short phrases can carry the core message. - Brand intros where the type should feel spatial, compressed, and deliberate. Not for: Not for body copy, long sentences, legal text, documentation, form labels, error messages, pricing details, or instructions. Not for unrelated phrase sets. If every flip introduces a new topic, the effect becomes a slot machine for positioning. Not for headlines where one strong sentence would do the job better. Accessibility and mobile: Expose the active phrase clearly and avoid making assistive technology read decorative duplicate layers. If the phrase sequence communicates essential meaning, provide a stable text equivalent or ensure each phrase remains understandable without relying on motion. On mobile, reduce depth distance, scale compression, and transition speed if the effect feels cramped. For reduced motion, show a static preferred phrase or switch phrases instantly without perspective movement. Performance budget: Keep the phrase count small, animate transform and opacity, avoid layout reads during every transition, and clean up timers or animation instances when the component unmounts. Reserve the headline container so phrase changes do not shift surrounding content. Avoid running multiple Depth Flip instances in the same viewport unless the page is deliberately built around kinetic typography. Common mistakes: - Using long phrases that cannot flip cleanly. - Letting the headline width jump on every phrase change. - Looping the animation too quickly beside the primary CTA. - Using unrelated claims in the same sequence. - Hiding the real text inside decorative layers. - Treating the effect as a replacement for clear positioning. Props: - `phrases` (string[], default ["Hyperiux Vault ships faster","Premium UI for modern teams","Built to launch beautifully"]): Phrases that cycle through the perspective flip. - `backgroundColor` (string, default "#f6f5f2"): Background color behind the effect. - `textColor` (string, default "#ffffff"): Text color for both the current and incoming phrase. - `loop` (boolean, default true): Restarts the phrase sequence after the last entry. - `holdDuration` (number, default 0.4): Delay before each phrase begins its flip transition. - `transitionDuration` (number, default 1.4): Duration of the flip animation. - `charStagger` (number, default 0.02): Delay between each character beginning its motion. - `useOpacityTransition` (boolean, default false): Fades outgoing and incoming characters during the flip. - `scrub` (boolean, default false): Links the first flip transition to scroll progress instead of autoplay. - `scrollStart` (string, default "top 80%"): ScrollTrigger start value used when scrub is enabled. - `scrollEnd` (string, default "bottom 20%"): ScrollTrigger end value used when scrub is enabled. Usage: ```jsx import DepthFlipText from "@/components/effects/depth-flip-text"; const page = () => { return ( <> ) } export default page ``` Related: Text Fill Animation, Text Convergence, Text Stream ### Drop Text - Slug: `drop-text` · Tier: Free · Category: Text Animations - Install: `npx hyperiux add drop-text` - Docs: https://vault.hyperiux.com/effects/text-animations/drop-text · Live demo: https://vault.hyperiux.com/demo/drop-text - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A gravity-led text animation for headlines, intros, and brand moments where the words should feel physical before they become fully readable. Best used for: - Short hero headlines where character motion supports the brand tone. - Campaign intros that need a playful, physical text reveal. - Portfolio and studio pages where motion craft is part of the selling point. - One-line statements that can resolve quickly into stable readable text. Not for: Not for body copy, labels, error messages, legal copy, instructions, pricing details, or any text users must read immediately. Not for long paragraphs. Gravity is charming for a headline; it is irritating for a contract. Accessibility and mobile: Expose the full phrase once as readable text. Do not make screen readers hear each character as it drops. On mobile, reduce distance, rotation, and stagger. For reduced motion, show the settled phrase immediately or use a short fade. Performance budget: Keep the animated phrase short, reserve the final text space, avoid layout reads during every character movement, and limit replay behavior. Animate transform and opacity rather than layout properties. Common mistakes: - Using Drop Text on long copy blocks. - Removing the readable phrase from the DOM. - Letting character movement cause layout shift. - Replaying the drop animation every time the user scrolls slightly. - Making the letters unreadable for longer than the sentence deserves. Props: - `variant` (string, default "drop"): Animation style used for the text entrance. - `splitBy` (string, default "characters"): Text unit used for the drop animation. - `staggerFrom` (string, default "random"): Origin used for the staggered drop sequence. - `yOffset` (number, default -30): Starting vertical offset in pixels. Negative values rise from above, positive values drop from below. - `xOffset` (number, default 0): Starting horizontal offset in pixels. - `rotate` (number, default 0): Starting rotation in degrees. - `blur` (number, default 0): Starting blur in pixels. - `scaleFrom` (number, default 1): Starting scale before the text settles into place. - `startOpacity` (number, default 0): Starting opacity before the text animates in. - `duration` (number, default 0.4): Animation duration in seconds. - `stagger` (number, default 0.02): Delay between each animated text unit. - `ease` (string, default "power2.out"): GSAP easing used by the drop animation. - `animateOnScroll` (boolean, default false): Runs the animation when the component enters the viewport. - `fontSize` (number, default 6): Font size in vw units. - `fontColor` (string, default "#ffffff"): Text color. - `textAlign` (string, default "center"): Text alignment. - `lineHeight` (number, default 1): Text line height. - `letterSpacing` (number, default 0): Letter spacing in em units. - `backgroundColor` (string, default "#101113"): Background color behind the text. - `text` (string, default "Motion Makes Spaces Move"): Text to animate; use \n for line breaks with splitBy lines. Usage: ```jsx import DropText from "@/components/effects/drop-text"; const page = () => { return ( <> ) } ``` Related: Blur Text, Text Convergence, Text Stream, Perspective Text Reveal ### Flickering Text - Slug: `flickering-text` · Tier: Free · Category: Text Animations - Install: `npx hyperiux add flickering-text` - Docs: https://vault.hyperiux.com/effects/text-animations/flickering-text · Live demo: https://vault.hyperiux.com/demo/flickering-text - Dependencies: @gsap/react, gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A controlled flicker animation for cinematic hero sections, cyber interfaces, launch pages, music campaigns, game-adjacent sites, and moody editorial layouts where typography needs atmosphere without losing readability. Best used for: - Dark hero sections where typography needs a cinematic or signal-led arrival. - AI, cyber, developer-tool, gaming, music, entertainment, and experimental brand pages. - Campaign intros where a short headline can carry dramatic atmosphere. - Portfolio openers where the first line should feel more authored than a normal fade. - One-off title moments where flicker supports mood, not every piece of text on the page. Not for: Not for body copy, documentation, legal text, pricing details, error messages, form labels, instructions, or accessibility-critical content. Not for long loops, constant blinking, or repeated flicker effects across the page. Not for calm SaaS pages where trust, clarity, and reading speed matter more than atmosphere. Accessibility and mobile: Expose the headline once as readable text. Do not make assistive technology read duplicate glow layers or flicker fragments. Avoid fast, high-contrast flashes. On mobile, reduce glow intensity, blur, and flicker count so the text remains comfortable to read. For reduced motion, render the stable headline immediately or use a minimal fade with no flicker. Performance budget: Keep the effect scoped to one or two headlines. Animate opacity, text-shadow, filter, or layered glow with restraint, and avoid large blur values on multiple text layers. Clean up timers or animation instances when the component unmounts. Do not loop the flicker indefinitely near CTAs, forms, or reading sections. Once the headline has arrived, let it stay still. Common mistakes: - Making the flicker too fast, too bright, or too repetitive. - Applying the effect to long copy instead of one short display line. - Letting glow reduce the sharpness of the final text. - Duplicating text layers without hiding decorative copies from assistive technology. - Looping the effect forever beside the main CTA. - Using flicker to compensate for weak headline writing. Props: - `backgroundColor` (string, default "#0a0a0a"): Background color behind the text. - `textColor` (string, default "#ffffff"): Text color. - `glowColor` (string, default "#ffffff"): Glow color when bloom is enabled. - `wigglesPerSecond` (number, default 2): Noise samples per second that drive the flicker. - `correlation` (number, default 0.5): How much each character follows the shared flicker lane. - `minOpacity` (number, default 0): Lowest opacity characters can dip to. - `minAmount` (number, default -1): Lower bound of the flicker selector. - `maxAmount` (number, default 1): Upper bound of the flicker selector. - `glowIntensity` (number, default 1): Glow strength when bloom is enabled. - `glowRadius` (number, default 1): Glow spread multiplier. - `fontSize` (number | string, default "10vw"): Font size for the text. - `fontWeight` (number | string, default 600): Font weight for the text. - `glow` (boolean, default true): Turns the extra glow effect on or off. Usage: ```jsx import FlickeringText from "@/components/effects/flickering-text"; const page = () => { return ( <> ) } export default page ``` Related: Drop Text, Typing Text, Blur Text, Text Stream ### Focus Text - Slug: `focus-text` · Tier: Free · Category: Text Animations - Install: `npx hyperiux add focus-text` - Docs: https://vault.hyperiux.com/effects/text-animations/focus-text · Live demo: https://vault.hyperiux.com/demo/focus-text - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A focused text reveal for hero statements, editorial intros, product claims, and brand pages where copy should move from atmosphere into clarity. Best used for: - Hero statements where each line should land in sequence. - Campaign and editorial intros where the writing has a clear rhythm. - Portfolio and studio pages where typography needs controlled atmosphere. - Product positioning sections where the final statement should resolve from several short claims. - Dark or minimal layouts where focus, blur, and timing can carry the visual treatment. Not for: Not for body copy, legal text, documentation, error messages, form labels, pricing details, or instructions. Not for long paragraphs. If every line needs time to focus, the page is not cinematic. It is slow. Not for copy that is weak without motion. Focus Text can pace a good statement; it cannot make a vague one meaningful. Accessibility and mobile: Expose the complete message once to assistive technology. Do not announce line fragments, duplicate layers, or intermediate blur states. On mobile, reduce blur distance, stagger length, and scale movement so the text remains easy to read. For reduced motion, render the final clear text immediately or use a short fade. Remove blur travel, line sequencing, scale movement, and repeated replay. Performance budget: Keep the animated text short, reserve the final text area, animate opacity, transform, and blur with restraint, and avoid repeated replay on minor scroll changes. Large blur values across big text can become expensive, especially on low-power devices. Let the animation finish and rest. A focused message should not keep breathing beside the CTA like it is nervous. Common mistakes: - Using Focus Text on long paragraphs. - Making blurred lines too hard to read for too long. - Letting line breaks change mid-animation across breakpoints. - Duplicating text layers without hiding decorative copies from assistive technology. - Replaying the focus sequence every time the user scrolls near it. - Treating focus motion as a substitute for clear writing. Props: - `backgroundColor` (string, default "#000000"): Background color. - `textColor` (string, default "#ffffff"): Text color. - `fontSize` (number, default 4.5): Text size in vw units. - `characterStagger` (number, default 0.05): Delay between each character reveal. - `revealDuration` (number, default 3.2): Duration of each character reveal. - `startScale` (number, default 0.4): Starting scale before characters settle. - `blurAmount` (number, default 18): Initial blur amount in pixels. - `holdDuration` (number, default 1.2): Pause duration after the full reveal completes. - `loop` (boolean, default false): Automatically replay the animation on a loop. - `scrub` (boolean, default false): Links the reveal to scroll progress instead of playing on mount. Disables looping and the replay button. - `scrollStart` (string, default "top 80%"): ScrollTrigger start value used when scrub is enabled. - `scrollEnd` (string, default "bottom 20%"): ScrollTrigger end value used when scrub is enabled. - `showReplayButton` (boolean, default true): Shows the built-in replay button inside the component. - `text` (string, default "Built for seamless interactions.\nDesigned with thoughtful motion.\nMade to feel unforgettable."): Text to reveal; \n starts a new line. Usage: ```jsx import FocusText from "@/components/effects/focus-text"; const page = () => { return ( <> ) } export default page ``` Related: Text Fill Animation, Overflow Text Reveal, Perspective Text Reveal, Glowing Text ### Glitchy Text - Slug: `glitchy-text` · Tier: Pro · Category: Text Animations - Install: `npx hyperiux add glitchy-text` - Docs: https://vault.hyperiux.com/effects/text-animations/glitchy-text · Live demo: https://vault.hyperiux.com/demo/glitchy-text - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A cyber-style text animation that fractures characters before resolving them into readable, crawlable headline copy. Best used for: - Cyber, AI, and developer-tool headlines where a brief fracture supports the tone. - One-line claims that can resolve quickly into stable DOM text. - Glitchy Text makes a short phrase arrive with timing while keeping the final text readable and indexable. Not for: Not for body copy, labels, error messages, legal copy, or any text users need to read immediately. Accessibility and mobile: Expose the complete phrase once for assistive technology. If characters are split visually, hide duplicated spans with aria-hidden when appropriate. Performance budget: Animate only the phrase that matters, reserve layout space, and avoid expensive filters over large text blocks. Common mistakes: - Using Glitchy Text on long body copy. - Removing the readable text from the DOM. - Letting split text cause layout shift. Props: - `baseTextColor` (string, default "#ffffff"): Base text layer color. - `glitchColor` (string, default "#eab308"): Accent color for the glitch layers and replay button. - `stagger` (number, default 0.025): Delay between consecutive characters in seconds. - `duration` (number, default 0.6): Duration of each character's slide in seconds. - `ease` (string, default "power2.inOut"): GSAP ease for the slide. Usage: ```jsx import GlitchyText from '@/components/effects/glitchy-text' const page = () => { return ( <> ) } export default page ``` Related: Blur Text, Circle Text Reveal, Mask Text Reveal, Overflow Text Reveal ### Glowing Text - Slug: `glowing-text` · Tier: Free · Category: Text Animations - Install: `npx hyperiux add glowing-text` - Docs: https://vault.hyperiux.com/effects/text-animations/glowing-text · Live demo: https://vault.hyperiux.com/demo/glowing-text - Dependencies: none beyond React - Tags: CSS - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A sequential glow text animation for technical intros, product-status messages, AI interfaces, security pages, and premium landing sections where copy should feel like it is being transmitted, verified, or unlocked. Best used for: - Developer-tool and AI pages where system-style messaging fits the product language. - Product launch sections where a short message should arrive with rhythm and atmosphere. - Dark hero panels where a soft glow can create focus without overpowering the headline. - Onboarding, private-beta, or access-state moments where the copy can feel transmitted or verified. Not for: Not for body copy, documentation, legal text, form labels, error messages, checkout flows, pricing details, or long explanations. Not for fake security, fake loading, fake encryption, or fake verification claims. A glowing word does not make a weak claim more credible. It only makes the weakness easier to see. Accessibility and mobile: Expose the completed message once to assistive technology. Do not announce every character as it appears. If the animation uses decorative character spans, mark duplicates as hidden where needed. On mobile, reduce glow radius, character delay, and line count. Long terminal-style lines should wrap predictably and remain readable. For reduced motion, render the final text immediately or use a brief fade without character-by-character arrival or glowing word progression. Performance budget: Keep the animated copy short, reserve the final text area, avoid layout shifts as characters appear, and clean up timers or intervals when the component unmounts. Limit glow blur and shadow intensity, especially on dark pages where large text-shadow values can become expensive. Avoid looping long sequences near conversion areas. Once the message has arrived, let it rest. Common mistakes: - Treating the glow as selective keyword emphasis instead of sequential arrival behavior. - Typing too much copy one character at a time. - Making screen readers hear every animated character. - Letting the glow blur the word until it becomes harder to read. - Looping the transmission beside a CTA forever. - Using system-style language for a product section that is not technical, secure, procedural, or command-led. Props: - `textColor` (string, default "#d8d8d8"): Base text color. - `glowColor` (string, default "#ffffff"): Glow and scan color. - `backgroundColor` (string, default "#0b0d0e"): Background color. - `fontSize` (number, default 2.2): Body text size in vw units. - `letterSpacing` (number, default 0.08): Letter spacing in em units. - `lineHeight` (number, default 1.55): Body line height. - `glowIntensity` (number, default 0.7): Glow strength. - `characterStagger` (number, default 0.045): Delay between each character starting its reveal. - `revealDuration` (number, default 0.5): How long each character takes to fade in and settle. - `lineGap` (number, default 0.15): Extra pause after a line's last word before the next line starts. - `text` (string, default "Connection established with Hyperiux Vault,\nDecrypting premium component signatures,\nMotion presets verified and ready to ship,\nWelcome in. Build something that glows."): Body text revealed line by line; \n separates lines. Usage: ```jsx import GlowingText from "@/components/effects/glowing-text"; const page = () => { return ( <> ) } export default page ``` Related: Blur Text, Typing Text, Drop Text, Chromatic Text ### Mask Text Reveal - Slug: `mask-text-reveal` · Tier: Pro · Category: Text Animations - Install: `npx hyperiux add mask-text-reveal` - Docs: https://vault.hyperiux.com/effects/text-animations/mask-text-reveal · Live demo: https://vault.hyperiux.com/demo/mask-text-reveal - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A clean masked text reveal that wipes real DOM text into view line by line for SaaS headlines, section intros, and polished landing-page copy. Best used for: - Polished SaaS headlines and section intros that need controlled line-by-line emphasis. - Short copy blocks where the reveal should feel clean, not noisy. - Mask Text Reveal makes a short phrase arrive with timing while keeping the final text readable and indexable. Not for: Not for body text, labels, errors, legal copy, or anything a user must read right away. Accessibility and mobile: Make the whole phrase available to assistive technology a single time; the text is split into line wrappers only, and the component keeps those lines readable rather than hiding them. Performance budget: Limit motion to the phrase that earns it, hold its layout space ahead of time, and keep heavy filters off large blocks of text. Common mistakes: - Using Mask Text Reveal on long body copy. - Removing the readable text from the DOM. - Letting split text cause layout shift. Props: - `animateOnScroll` (boolean, default true): Runs reveal on scroll. - `stagger` (number, default 0.2): Delay between animated lines. - `duration` (number, default 5.5): Mask reveal duration. - `delay` (number, default 0): Animation delay. - `scrub` (boolean, default false): Links the reveal to scroll progress. - `maskAngle` (number, default 150): Angle of the wipe in degrees. - `maskSoftness` (number, default 33.3): Softness of the wipe's edge, as a % of the gradient (0 = hard edge). - `textColor` (string, default "#ffffff"): Text color. Unset inherits from the surrounding text. Usage: ```jsx import MaskTextReveal from "@/components/effects/mask-text-reveal"; const page = () => { return ( <>

Pull the words from the noise.

) } ``` Related: Blur Text, Circle Text Reveal, Glitchy Text, Overflow Text Reveal ### Number Counter - Slug: `number-counter` · Tier: Free · Category: Text Animations - Install: `npx hyperiux add number-counter` - Docs: https://vault.hyperiux.com/effects/text-animations/number-counter · Live demo: https://vault.hyperiux.com/demo/number-counter - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). Give important numbers a visible moment of arrival, so metrics feel noticed without becoming noisy or hard to trust. Best used for: - Metric bands where a small set of proof points needs emphasis. - Launch pages where numbers support the claim without becoming the whole story. - SaaS, AI, and developer-tool pages where quantitative proof deserves a visible arrival. Not for: Not for financial dashboards, compliance tables, legal figures, or analytics screens where exact reading speed matters more than animation. Not for pages where every number spins. That is not proof; that is a slot machine with a marketing degree. Accessibility and mobile: Expose the final number and label as readable text. Do not make screen readers listen to every intermediate digit. On mobile and reduced motion, show the final value immediately or use a very short opacity change. Performance budget: Limit animated counters to the numbers that matter, avoid continuous loops, reserve layout width for the final value, and stop animation once the metric has resolved. Common mistakes: - Animating every statistic on the page. - Letting the number shift layout as digits change. - Making the animation more memorable than the metric. Props: - `duration` (number, default 1.5): Digit roll duration in seconds for all three counters. - `stagger` (number, default 0.1): Delay between digit columns in seconds for all three counters. - `textColor` (string, default "#021A54"): Counter text color for all three counters. Usage: ```jsx import NumberCounter from '@/components/effects/number-counter'; const page = () => { return ( <> ) } ``` Related: Text Fill Animation, Text Convergence, Character Trail, Blur Text ### Overflow Text Reveal - Slug: `overflow-text-reveal` · Tier: Pro · Category: Text Animations - Install: `npx hyperiux add overflow-text-reveal` - Docs: https://vault.hyperiux.com/effects/text-animations/overflow-text-reveal · Live demo: https://vault.hyperiux.com/demo/overflow-text-reveal - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A clipped text reveal animation that lifts short copy into view without disturbing layout, readability, or page structure. Best used for: - Landing-page headlines that should lift into place without layout chaos. - Section intros where motion needs to feel composed and restrained. - Overflow Text Reveal makes a short phrase arrive with timing while keeping the final text readable and indexable. Not for: Not for body copy, labels, error messages, legal copy, or any text users need to read immediately. Accessibility and mobile: Expose the complete phrase once for assistive technology. If characters are split visually, hide duplicated spans with aria-hidden when appropriate. Performance budget: Animate only the phrase that matters, reserve layout space, and avoid expensive filters over large text blocks. Common mistakes: - Using Overflow Text Reveal on long body copy. - Removing the readable text from the DOM. - Letting split text cause layout shift. Props: - `animateOnScroll` (boolean, default true): Runs the reveal when scrolled into view. - `delay` (number, default 0): Animation delay. - `scrub` (boolean, default false): Links the animation to scroll progress. - `direction` (string, default "bottom"): Reveal direction. - `splitBy` (string, default "words"): Animate per character, per word, or per line (each piece is masked). - `startOpacity` (number, default 0): Opacity each piece starts from before it reveals. - `startRotation` (number, default 8): Starting tilt in degrees; the sign follows the direction. - `duration` (number, default 0.5): Duration of each piece's reveal in seconds. - `stagger` (number, default 0.03): Delay between consecutive pieces in seconds. - `ease` (string, default "power3.out"): GSAP ease for the reveal. Usage: ```jsx import OverflowTextReveal from "@/components/effects/overflow-text-reveal"; export default function Page() { return ( <>

Characters
Rise From
Below

) } ``` Related: Blur Text, Circle Text Reveal, Glitchy Text, Mask Text Reveal ### Perspective Text Reveal - Slug: `perspective-text-reveal` · Tier: Pro · Category: Text Animations - Install: `npx hyperiux add perspective-text-reveal` - Docs: https://vault.hyperiux.com/effects/text-animations/perspective-text-reveal · Live demo: https://vault.hyperiux.com/demo/perspective-text-reveal - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A spatial text reveal animation that gives headlines and launch claims a subtle depth-led arrival. Best used for: - Premium headlines where subtle depth fits the brand system. - Short statements that can tolerate spatial motion without losing readability. - Perspective Text Reveal makes a short phrase arrive with timing while keeping the final text readable and indexable. Not for: Not for body text, labels, errors, legal copy, or anything a user must read right away. Accessibility and mobile: Make the whole phrase available to assistive technology a single time; where the text is split into per-character spans, mark the duplicates aria-hidden. Performance budget: Limit motion to the phrase that earns it, hold its layout space ahead of time, and keep heavy filters off large blocks of text. Common mistakes: - Using Perspective Text Reveal on long body copy. - Removing the readable text from the DOM. - Letting split text cause layout shift. Props: - `animateOnScroll` (boolean, default true): Runs reveal on scroll. - `delay` (number, default 0): Animation delay in seconds. - `duration` (number, default 0.8): Line reveal duration in seconds. - `stagger` (number, default 0.08): Delay between revealed lines. - `scrub` (boolean, default false): Links the reveal to scroll progress. - `startOpacity` (number, default 0): Opacity the text starts from before it reveals. - `direction` (string, default "top"): Side the text swings in from. - `splitBy` (string, default "lines"): Animate per character, per word, or per line. - `rotation` (number, default 70): Starting tilt in degrees; its sign follows the direction. - `ease` (string, default "power3.out"): GSAP ease for the reveal. - `perspective` (number, default 800): Perspective distance in px - lower values give a stronger 3D effect. Usage: ```jsx import PerspectiveTextReveal from "@/components/effects/perspective-text-reveal"; const page = () => { return ( <>

Lines fall into depth.

) } ``` Related: Blur Text, Circle Text Reveal, Glitchy Text, Mask Text Reveal ### Pixel Text Fill - Slug: `pixel-text-fill` · Tier: Free · Category: Text Animations - Install: `npx hyperiux add pixel-text-fill` - Docs: https://vault.hyperiux.com/effects/text-animations/pixel-text-fill · Live demo: https://vault.hyperiux.com/demo/pixel-text-fill - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A text animation for long headlines and brand statements where key words fill, light up, or resolve with a pixel-led treatment while the full sentence remains readable. Best used for: - AI, developer-tool, cybersecurity, and technical landing pages where pixel language supports the brand. - Hero or section headlines where the message should resolve through scroll. - Campaign pages that need a digital transition from visual noise to clear copy. - Portfolio intros where typography can carry a low-resolution to high-resolution transformation. - Short statements that can tolerate a brief fragmented state before becoming fully readable. Not for: Not for body copy, legal text, documentation, pricing details, form labels, instructions, error messages, or any copy that users must read instantly. Not for long paragraphs. Pixelation is useful for a headline, not for making someone decode a terms-of-service page like it is a corrupted cartridge. Not for brands where clarity, calm, and immediate trust matter more than digital texture. Accessibility and mobile: Expose the final text once as readable HTML. Do not make assistive technology read decorative pixel fragments, duplicated layers, or intermediate fill states. On mobile, reduce pixel density and shorten the scroll distance required to complete the fill. For reduced motion, render the final filled text immediately or use a short fade. Do not force users to scroll through a fragmented text state when they have asked for less motion. Performance budget: Keep the animated text short, limit pixel density, reserve the final text space, and avoid layout shifts while the fill progresses. If scroll drives the effect, throttle updates, clean up observers or timelines on unmount, and avoid expensive per-frame layout reads. Do not run multiple large Pixel Text Fill blocks in the same viewport unless the page is deliberately built around kinetic typography. Common mistakes: - Describing Pixel Text Fill as selective keyword highlighting. - Leaving text pixelated for too long. - Making the final phrase unavailable as real HTML. - Using heavy pixel density that causes scroll jank. - Letting line breaks change while the fill progresses. - Making the scroll distance too long for a short headline. - Treating unreadability as the effect instead of the starting state. Props: - `direction` (string, default "up"): Fill direction. - `pixelSize` (number, default 3): Pixel cell size used by the dither edge. - `stagger` (number, default 32): Character stagger window for the fill head. - `bandFraction` (number, default 1.15): Soft pixel band width as a fraction of each glyph. - `effectWidth` (number, default 1.4): Pixelated fill band width multiplier. - `settleBlend` (number, default 0.45): How early the final text color blends in behind the pixel edge. - `textColor` (string, default "#ffffff"): Final text color. - `primaryColor` (string, default "#ff5f00"): Pixel dither edge color. - `dimColor` (string, default "#272727"): Initial dim text color. - `backgroundColor` (string, default "#101113"): Section background color. - `fontSize` (number, default 3.2): Font size in vw units. - `fontWeight` (number, default 500): Font weight. - `lineHeight` (number, default 1.18): Text line height. - `textAlign` (string, default "center"): Text alignment. - `maxWidth` (number, default 80): Text wrapper width as a percentage of the section. - `text` (string, default "Build with calm motion.\nKeep the rhythm crisp and clear.\nMake each screen feel alive.\nLet every detail guide focus."): Text drawn and filled on canvas; \n forces line breaks. Usage: ```jsx import PixelTextFill from "@/components/effects/pixel-text-fill"; const page = () => { return ( <> ) } ``` Related: Scramble Text, Drop Text, Text Fill Animation ### Rectangular Text Reveal - Slug: `rectangular-text-reveal` · Tier: Free · Category: Text Animations - Install: `npx hyperiux add rectangular-text-reveal` - Docs: https://vault.hyperiux.com/effects/text-animations/rectangular-text-reveal · Live demo: https://vault.hyperiux.com/demo/rectangular-text-reveal - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A boxed-mask text reveal that introduces short statements through a rectangular frame for graphic brand and campaign sections. Best used for: - Graphic brand pages where a framed or block-based reveal matches the design language. - Campaign lines where the mask is an art-direction choice, not a gimmick. - Rectangular Text Reveal makes a short phrase arrive with timing while keeping the final text readable and indexable. Not for: Avoid it on body copy, labels, error and legal text, or any wording that has to be read on sight. Accessibility and mobile: Assistive technology should hear the phrase once, not character by character; visually split fragments are hidden from the accessibility tree with aria-hidden. Performance budget: Move only the words that carry weight, pre-reserve their space to avoid shift, and skip costly filters on large text blocks. Common mistakes: - Using Rectangular Text Reveal on long body copy. - Removing the readable text from the DOM. - Letting split text cause layout shift. Props: - `baseColor` (string, default "#ea580c"): Base reveal rectangle color. - `overlayColor` (string, default "#111111"): Overlay reveal rectangle color. - `useOverlay` (boolean, default true): Enables the overlay pass. - `stagger` (number, default 0.2): Delay between line reveals. - `coverDuration` (number, default 0.34): Cover animation duration. - `revealDuration` (number, default 0.42): Reveal animation duration. - `direction` (string, default "left"): Reveal direction. - `overlayEnterDuration` (number, default 0.24): Overlay rectangle cover duration in seconds. - `overlayExitDuration` (number, default 0.28): Overlay rectangle uncover duration in seconds. Usage: ```jsx import RectangularTextReveal from "@/components/effects/rectangular-text-reveal"; export default function Page() { return (

A directional rectangular reveal built for expressive, editorial motion systems.

); } ``` Related: Overflow Text Reveal, Text Convergence, Blur Text, Rolling Text, Focus Text ### Rolling Text - Slug: `rolling-text` · Tier: Free · Category: Text Animations - Install: `npx hyperiux add rolling-text` - Docs: https://vault.hyperiux.com/effects/text-animations/rolling-text · Live demo: https://vault.hyperiux.com/demo/rolling-text - Dependencies: @gsap/react, gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A character-level text animation for logos, hero words, product names, launch titles, and technical brand moments where the final word should feel assembled rather than simply faded in. Best used for: - Product names, logo-style wordmarks, and short hero words. - Developer-tool, AI, cyber, and technical brand pages where mechanical text motion fits the tone. - Portfolio and studio intros where the title needs a more authored entrance. - Campaign headings that should feel engineered, assembled, or activated. - Short labels where character motion can add craft without slowing the page. Not for: Not for body copy, long headlines, legal text, documentation, form labels, pricing details, error messages, or instructions. Not for phrases where every word carries essential information and needs immediate readability. Not for endless loops beside a CTA. A rolling word is memorable once. After the fifth loop, it is just nervous typography. Accessibility and mobile: Expose the final word or phrase once to assistive technology. Do not make screen readers read every rolling character layer or transitional glyph. On mobile, reduce stagger, travel distance, and replay behavior so the word resolves quickly on smaller screens. For reduced motion, render the final text immediately or use a short fade with no rolling character movement. Performance budget: Keep the animated phrase short, animate transform and opacity, avoid layout-changing character movement, and clean up timers or animation instances when the component unmounts. Do not run multiple Rolling Text effects in the same viewport unless the page is intentionally built around kinetic typography. Too many rolling words turn hierarchy into machinery noise. Common mistakes: - Using Rolling Text on long sentences. - Letting character movement cause layout shift. - Making the rolling sequence too slow for a simple word. - Duplicating character layers without hiding decorative copies from assistive technology. - Looping the animation endlessly near important CTAs. - Using the effect on a word that is not important enough to earn the attention. Props: - `text` (string, default "HYPERIUX"): The word rendered by the reel. - `textColor` (string, default "#ffffff"): Letter color. - `minCycles` (number, default 3): Minimum whole letter-heights a character travels before landing. - `cycleVariance` (number, default 3): Extra random cycles added on top of minCycles. - `duration` (number, default 2.4): Base spin duration in seconds. - `durationVariance` (number, default 1.2): Extra random duration added per character, in seconds. Usage: ```jsx import RollingText from "@/components/effects/rolling-text"; const page = () => { return ( <> ) } export default page ``` Related: Blur Text, Text Convergence, Text Stream ### Scramble Text - Slug: `scramble-text` · Tier: Pro · Category: Text Animations - Install: `npx hyperiux add scramble-text` - Docs: https://vault.hyperiux.com/effects/text-animations/scramble-text · Live demo: https://vault.hyperiux.com/demo/scramble-text - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A decode-style text animation where characters scramble briefly before resolving into readable, crawlable HTML text. Best used for: - AI, developer-tool, and cyber headlines where signal resolving into meaning supports authority. - Short hero claims that can settle quickly into readable HTML text. - Scramble Text makes a short phrase arrive with timing while keeping the final text readable and indexable. Not for: Not for body copy, labels, error messages, legal copy, or any text users need to read immediately. Accessibility and mobile: Expose the complete phrase once for assistive technology. If characters are split visually, hide duplicated spans with aria-hidden when appropriate. Performance budget: Animate only the phrase that matters, reserve layout space, and avoid expensive filters over large text blocks. Common mistakes: - Using Scramble Text on long body copy. - Removing the readable text from the DOM. - Letting split text cause layout shift. Props: - `speed` (number, default 0.6): Scramble character cycling speed. - `charType` (string, default "uppercase"): Character set used while scrambling. - `textColor` (string, default "#111111"): Text color. - `align` (string, default "left"): Text alignment. - `duration` (number, default 0.7): Scramble reveal duration in seconds. - `stagger` (number, default 0.04): Delay between scrambled characters. - `textSize` (number, default 6): Headline size in vw (clamped between 2rem and 9rem). - `initialOpacity` (number, default 0): Opacity of the characters before they decode (0 = hidden, 1 = fully visible). Usage: ```jsx import ScrambleText from "@/components/effects/scramble-text"; const page = () => { return ( <> ) } ``` Related: Blur Text, Circle Text Reveal, Glitchy Text, Mask Text Reveal ### Slide Text Reveal - Slug: `slide-text-reveal` · Tier: Pro · Category: Text Animations - Install: `npx hyperiux add slide-text-reveal` - Docs: https://vault.hyperiux.com/effects/text-animations/slide-text-reveal · Live demo: https://vault.hyperiux.com/demo/slide-text-reveal - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A restrained slide-in text animation for SaaS headlines, agency section intros, launch claims, and proof statements. Best used for: - SaaS and agency section intros where the claim should arrive with quiet momentum. - Short launch copy that benefits from motion but still reads instantly afterward. - Slide Text Reveal makes a short phrase arrive with timing while keeping the final text readable and indexable. Not for: Not for body text, labels, errors, legal copy, or anything a user must read right away. Accessibility and mobile: Make the whole phrase available to assistive technology a single time; where the text is split into per-character spans, mark the duplicates aria-hidden. Performance budget: Limit motion to the phrase that earns it, hold its layout space ahead of time, and keep heavy filters off large blocks of text. Common mistakes: - Using Slide Text Reveal on long body copy. - Removing the readable text from the DOM. - Letting split text cause layout shift. Props: - `animateOnScroll` (boolean, default true): Runs reveal on scroll. - `delay` (number, default 0): Animation delay in seconds. - `duration` (number, default 0.5): Character reveal duration in seconds. - `horizontalOffset` (number, default 20): Starting horizontal offset in pixels. - `stagger` (number, default 0.03): Delay between revealed characters. - `variant` (string, default "right"): Slide direction. Usage: ```jsx import SlideTextReveal from '@/components/effects/slide-text-reveal' const page = () => { return ( <>

Slide From Right

) } ``` Related: Blur Text, Circle Text Reveal, Glitchy Text, Mask Text Reveal ### Spotlight Text - Slug: `spotlight-text` · Tier: Pro · Category: Text Animations - Install: `npx hyperiux add spotlight-text` - Docs: https://vault.hyperiux.com/effects/text-animations/spotlight-text · Live demo: https://vault.hyperiux.com/demo/spotlight-text - Dependencies: none beyond React - Tags: Vanilla JS - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A moving-highlight text effect that guides attention across selected words, metrics, and short product claims. Best used for: - Short claims, metrics, or product phrases where one phrase needs guided emphasis. - Text moments where the highlight supports attention without hiding the sentence. - Spotlight Text makes a short phrase arrive with timing while keeping the final text readable and indexable. Not for: Avoid it on body copy, labels, error and legal text, or any wording that has to be read on sight. Accessibility and mobile: Assistive technology should hear the phrase once, not character by character; visually split fragments are hidden from the accessibility tree with aria-hidden. Performance budget: Move only the words that carry weight, pre-reserve their space to avoid shift, and skip costly filters on large text blocks. Common mistakes: - Using Spotlight Text on long body copy. - Removing the readable text from the DOM. - Letting split text cause layout shift. Props: - `baseTextColor` (string, default "#525252"): Dim base text color. - `spotlightColor` (string, default "#ffffff"): Text color inside the spotlight. - `lerp` (number, default 0.08): Pointer-follow smoothing amount; higher values track faster. - `spotlightSize` (number, default 220): Spotlight radius in pixels. - `smoothness` (number, default 0.12): Spotlight opacity smoothing amount. - `size` (string, default "text-3xl md:text-5xl"): Tailwind font-size classes for the text. Usage: ```jsx import SpotlightText from "@/components/effects/spotlight-text"; const page = () => { return ( <>
); }; export default page; ``` Related: Blur Text, Circle Text Reveal, Glitchy Text, Mask Text Reveal ### Text Cloning - Slug: `text-cloning` · Tier: Pro · Category: Text Animations - Install: `npx hyperiux add text-cloning` - Docs: https://vault.hyperiux.com/effects/text-animations/text-cloning · Live demo: https://vault.hyperiux.com/demo/text-cloning - Dependencies: none beyond React - Tags: Canvas - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A layered canvas text animation that stacks outline copies of a short word behind it and shifts them with the pointer to create depth, motion, and experimental headline energy. Best used for: - Wordmarks, brand names, and short claims where duplicated layers can create motion depth. - Brand moments where you also render the phrase as hidden HTML text, since the canvas itself exposes nothing to assistive technology. - Text Cloning gives a short phrase pointer-driven depth, so pair it with a real HTML heading to keep the words readable and indexable. Not for: Not for body copy, labels, error messages, legal copy, or any text users need to read immediately. Accessibility and mobile: Expose the complete phrase once for assistive technology. The canvas has no label and no DOM text, so add an aria-label or a visually hidden heading; on touch screens the layers follow the finger. Performance budget: Animate only the phrase that matters, reserve layout space, and avoid expensive filters over large text blocks. Common mistakes: - Using Text Cloning on long body copy. - Shipping the canvas alone without a real HTML copy of the phrase. - Using a long phrase, since the text shrinks to fit the viewport width on one line. Props: - `cloneCount` (number, default 9): Number of text clone layers rendered. - `offset` (number, default 220): Maximum pointer parallax distance between clone layers. - `textColor` (string, default "#f5f5f5"): Clone and center text color. - `textSize` (number, default 1): Text size multiplier. Usage: ```jsx import TextCloning from "@/components/effects/text-cloning"; const page = () => { return ( <> ); }; export default page; ``` Related: Blur Text, Circle Text Reveal, Glitchy Text, Mask Text Reveal ### Text Fill Animation - Slug: `text-fill-animation` · Tier: Pro · Category: Text Animations - Install: `npx hyperiux add text-fill-animation` - Docs: https://vault.hyperiux.com/effects/text-animations/text-fill-animation · Live demo: https://vault.hyperiux.com/demo/text-fill-animation - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A text fill animation that adds visual emphasis to short phrases, metrics, proof points, and high-impact statements. Best used for: - Hero and pricing phrases where fill progression can reinforce emphasis. - Short statements where colour or weight changes support meaning without replacing it. - Text Fill makes a short phrase arrive with timing while keeping the final text readable and indexable. Not for: Not for body text, labels, errors, legal copy, or anything a user must read right away. Accessibility and mobile: Make the whole phrase available to assistive technology a single time; where the text is split into per-character spans, mark the duplicates aria-hidden. Performance budget: Limit motion to the phrase that earns it, hold its layout space ahead of time, and keep heavy filters off large blocks of text. Common mistakes: - Using Text Fill on long body copy. - Removing the readable text from the DOM. - Letting split text cause layout shift. Props: - `text` (string, default "Design systems should feel effortless, not like you're fighting your own components every time you build."): Text filled on scroll. - `textColor` (string, default "#111111"): Final text color. - `primaryColor` (string, default "#ff6b00"): Highlight color. - `dimColor` (string, default "#AAAAAA"): Initial dimmed text color. - `backgroundColor` (string, default "#F0EFE9"): Section background color. - `duration` (number, default 0.4): Character fill animation duration in seconds. - `stagger` (number, default 0.05): Delay offset between each animated character. - `fillWidth` (number, default 1): Width of the color fill sweep band applied to each character. - `textSize` (string, default "5vw"): Desktop font size as a CSS length. - `textWidth` (string, default "80%"): Desktop text block width as a CSS length. - `tabletTextSize` (string, default "6.5vw"): Font size as a CSS length at 768-1024px. - `tabletTextWidth` (string, default "88%"): Text block width as a CSS length at 768-1024px. - `mobileTextSize` (string, default "8vw"): Font size as a CSS length below 768px. - `mobileTextWidth` (string, default "95%"): Text block width as a CSS length below 768px. Usage: ```jsx import TextFillAnimation from "@/components/effects/text-fill-animation"; const page = () => { return ( <> ); }; export default page; ``` Related: Split Canvas, Interactive List Preview, Stack Loader ### Text Hover Expand - Slug: `text-hover` · Tier: Pro · Category: Text Animations - Install: `npx hyperiux add text-hover` - Docs: https://vault.hyperiux.com/effects/text-animations/text-hover · Live demo: https://vault.hyperiux.com/demo/text-hover - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). An interactive text effect that expands short words or labels on hover for editorial links, playful navigation, and desktop brand moments. Best used for: - Optional hover labels, nav accents, or editorial links where expansion adds exploration. - Desktop moments that still keep the word readable without hover. - Text Hover Expand makes a short phrase arrive with timing while keeping the final text readable and indexable. Not for: Avoid it on body copy, labels, error and legal text, or any wording that has to be read on sight. Accessibility and mobile: Assistive technology should hear the phrase once, not character by character; visually split fragments are hidden from the accessibility tree with aria-hidden. Performance budget: Move only the words that carry weight, pre-reserve their space to avoid shift, and skip costly filters on large text blocks. Common mistakes: - Using Text Hover Expand on long body copy. - Removing the readable text from the DOM. - Letting split text cause layout shift. Props: - `bgColor` (string, default "#0a0a0a"): Section background color. - `textColor` (string, default "#ffffff"): Inactive text and description color. - `hoverColor` (string, default "#ffffff"): Active text and corner-frame color. - `duration` (number, default 0.35): Hover frame animation duration in seconds. Usage: ```jsx import TextHover from '@/components/effects/text-hover' const page = () => { return ( <> ) } ``` Related: Blur Text, Circle Text Reveal, Glitchy Text, Mask Text Reveal ### Text Stream - Slug: `text-stream` · Tier: Pro · Category: Text Animations - Install: `npx hyperiux add text-stream` - Docs: https://vault.hyperiux.com/effects/text-animations/text-stream · Live demo: https://vault.hyperiux.com/demo/text-stream - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A signal-like text animation that makes short technical headlines feel like data, motion, or language flowing through a line. Best used for: - Technical launch lines where streaming motion reinforces signal, data, or computation. - Short hero phrases that can move once and settle cleanly. - Text Stream makes a short phrase arrive with timing while keeping the final text readable and indexable. Not for: Not for body copy, labels, error messages, legal copy, or any text users need to read immediately. Accessibility and mobile: Expose the complete phrase once for assistive technology. If characters are split visually, hide duplicated spans with aria-hidden when appropriate. Performance budget: Animate only the phrase that matters, reserve layout space, and avoid expensive filters over large text blocks. Common mistakes: - Using Text Stream on long body copy. - Removing the readable text from the DOM. - Letting split text cause layout shift. Props: - `speed` (number, default 1): Streaming speed multiplier. - `verticalSpacing` (number, default 0.08): Vertical spacing between streamed lines. - `textColor` (string, default "#ffffff"): Text color. - `backgroundColor` (string, default "#000000"): Background color behind the stream. - `autoplay` (boolean, default true): Keeps the stream drifting on its own when idle. - `runOnScroll` (boolean, default true): Boosts and reverses the stream in response to scroll or wheel input. Usage: ```jsx import TextStream from "@/components/effects/text-stream"; const page = () => { return ( <> ); }; export default page; ``` Related: Blur Text, Circle Text Reveal, Glitchy Text, Mask Text Reveal ### Typing Text - Slug: `typing-text` · Tier: Free · Category: Text Animations - Install: `npx hyperiux add typing-text` - Docs: https://vault.hyperiux.com/effects/text-animations/typing-text · Live demo: https://vault.hyperiux.com/demo/typing-text - Dependencies: none beyond React - Tags: CSS - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A typewriter-style text animation for developer tools, AI products, security pages, and technical brand moments where the copy should feel like it is being executed, not merely displayed. Best used for: - Developer-tool and CLI pages where command-like or system-like copy fits naturally. - Cybersecurity and infrastructure pages where status messages support the product language. - AI product sections where typed output can frame automation, reasoning, or setup. - Short onboarding or hero moments where staged text helps build attention. Not for: Not for body copy, legal text, error messages, instructions, long explanations, pricing details, or anything users need to read immediately. Not for fake security, fake loading, fake progress, or fake system claims. A typing cursor does not make a vague claim more technical. It only makes it arrive slower. Accessibility and mobile: Expose the final text once. Do not make screen readers announce every character as it types. On mobile, reduce line count, keep line breaks stable, and avoid tiny terminal-style copy that becomes hard to read. For reduced motion, show the final text immediately or use a short fade. Performance budget: Keep the number of animated lines small, avoid updating layout-heavy state on every character when unnecessary, reserve the final text area, and clean up timers when the component unmounts. Do not loop long typed sequences near important reading or conversion areas. Common mistakes: - Typing long paragraphs character by character. - Making the animation loop endlessly beside a CTA. - Using terminal language for a product that has nothing to do with technical workflows. - Announcing every typed character to assistive technology. - Letting line wrapping change while the text types. - Using fake progress language that implies a real system check. Props: - `variant` (string, default "sequential"): Typing sequence variant. - `textColor` (string, default "#d8d8d8"): Typed text color. - `cursorColor` (string, default "#f59e0b"): Cursor color. - `backgroundColor` (string, default "#121212"): Background color. - `fontSize` (number, default 2.4): Text size in vw units. - `fontWeight` (number, default 500): Font weight. - `lineHeight` (number, default 1.55): Line height. - `textAlign` (string, default "left"): Text alignment. - `maxWidth` (number, default 80): Maximum text block width in vw units. - `charactersPerSecond` (number, default 18): Typing speed. - `animationDuration` (number, default 1): Multiplier applied to each line typing duration. - `lineDelay` (number, default 0.5): Delay between line starts. - `holdDuration` (number, default 1.4): Hold time before loop reset. - `typingDirection` (string, default "left-to-right"): Direction the text types from. - `blur` (number, default 0): Starting blur in pixels. - `rotate` (number, default 0): Starting X rotation in degrees. - `scale` (number, default 1): Starting scale before the line settles. - `perspective` (number, default 800): Perspective depth for rotated typing. - `cursorStyle` (string, default "bar"): Cursor visual style. - `cursorWidth` (number, default 3): Cursor thickness in pixels. - `showCursor` (boolean, default true): Shows the animated cursor. - `lines` (string[], default ["Opening the vault handshake...","Verifying encrypted component keys.","Loading protected motion presets.","Vault access granted. Hyperiux assets are ready."]): Lines to type, one string per line. Usage: ```jsx import TypingText from "@/components/effects/typing-text"; const page = () => { return ( <> ) } ``` Related: Scramble Text, Drop Text, Pixel Text Fill, Text Stream, Glitchy Text ### Variable Text Proximity - Slug: `variable-text-proximity` · Tier: Free · Category: Text Animations - Install: `npx hyperiux add variable-text-proximity` - Docs: https://vault.hyperiux.com/effects/text-animations/variable-text-proximity · Live demo: https://vault.hyperiux.com/demo/variable-text-proximity - Dependencies: motion - Tags: Motion - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A cursor-reactive text animation for hero copy, editorial statements, portfolio intros, and technical landing pages where typography should feel responsive without losing readability. Best used for: - Hero statements where the copy should feel responsive to the visitor’s attention. - Creative portfolio intros where typographic interaction is part of the brand signal. - Developer-tool, AI, and technical pages where proximity behavior supports a precise interface mood. - Editorial sections where one short paragraph can carry a tactile interaction. - Brand manifestos where the words need subtle motion without becoming unreadable. Not for: Not for long body copy, documentation, legal text, pricing details, error messages, form labels, instructions, or dense educational content. Not for mobile-first pages where pointer proximity cannot be reproduced meaningfully. Not for weak copy. Variable text can make a sentence feel alive; it cannot make a vague sentence worth reading. Accessibility and mobile: Expose the full sentence once as readable text. Do not make screen readers read every individually wrapped character. Maintain text selection, contrast, focus visibility, and normal reading order. On touch devices, use a static final text state, a tap-safe simplified interaction, or disable proximity behavior entirely. For reduced motion, remove pointer-reactive changes and render the normal readable text without weight shifting. Performance budget: Keep the text block short, throttle pointer work with requestAnimationFrame, avoid React state updates for every character on every pointer event, and clean up listeners on unmount. Cache character positions and recalculate only when layout changes. Avoid applying proximity calculations to long paragraphs or multiple large text blocks in the same viewport. Every letter does not need its own gym membership. Common mistakes: - Splitting every character without preserving accessible text. - Using the effect on long paragraphs where reading speed matters. - Updating layout-heavy state on every pointer move. - Choosing a font that does not support the intended variable axis. - Making letters change so dramatically that the sentence becomes harder to read. - Forgetting that touch users do not have cursor proximity. Props: - `radius` (number, default 100): Pointer influence radius. - `falloff` (string, default "linear"): How quickly the font variation fades with distance. - `baseWeight` (number, default 300): Font weight away from the pointer. - `hoverWeight` (number, default 800): Font weight nearest the pointer. - `backgroundColor` (string, default "#080808"): Demo background color. - `textColor` (string, default "#ffffff"): Text color. - `fontSize` (number, default 55): Paragraph font size in pixels. - `lineHeight` (number, default 1.18): Paragraph line height. - `width` (number, default 80): Paragraph width as a percentage of its container. - `italic` (boolean, default false): Slant nearby letters toward italic on pointer proximity. Usage: ```jsx import VariableTextProximity from "@/components/effects/variable-text-proximity"; const page = () => { return ( <> ) } export default page ``` Related: Blur Text, Text Convergence, Text Stream ## Animated Backgrounds (5) ### Dither Canvas - Slug: `dither-canvas` · Tier: Pro · Category: Animated Backgrounds - Install: `npx hyperiux add dither-canvas` - Docs: https://vault.hyperiux.com/effects/backgrounds/dither-canvas · Live demo: https://vault.hyperiux.com/demo/dither-canvas - Dependencies: none beyond React - Tags: Canvas shader - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A grainy canvas background that adds computational texture behind hero copy, product sections, and technical brand moments. Best used for: - Technical and editorial heroes where grain, signal, or computational texture supports the claim. - Short, high-contrast sections that can pause animation or swap to a static texture. - Dither Canvas adds atmosphere behind the message without making the background the product. Not for: Not for low-contrast text sections, long reading pages, or pages already carrying heavy video/WebGL cost. Accessibility and mobile: Decorative backgrounds should be hidden from assistive technology. On mobile, reduce density and keep foreground contrast high. Performance budget: Keep density low enough to protect text, pause animated canvas work offscreen, and provide a static CSS/image fallback. Common mistakes: - Letting Dither Canvas compete with foreground text. - Animating canvas work offscreen. - Choosing canvas/WebGL when CSS would do the job. Props: - `videoSrc` (string, default "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/binary-effect-video.mp4"): Video source URL used by the effect. - `charColumns` (number, default 145): Controls the density of generated character columns. - `colorizeFromVideo` (boolean, default false): Uses video color data instead of fixed monochrome characters. - `videoZoom` (number, default 1): Zoom level applied to the video source. - `charZoom` (number, default 1): Scale factor for the rendered character grid. - `spellBrightChars` (boolean, default false): Uses bright sampled areas to spell the configured character phrase. - `colorBoost` (number, default 1.4): Boosts sampled color intensity. - `disableMobileCursor` (boolean, default true): Disables cursor interaction on mobile layouts. - `cursorHint` (string, default "Move your cursor to see the binary fluid distortion effect."): Instructional cursor hint text. - `showMobileMessage` (boolean, default true): Shows or hides the mobile message overlay. - `className` (string, default ""): Additional class names for the root canvas element. Usage: ```jsx import DitherCanvas from "@/components/effects/dither-canvas"; export default function Page() { return (
); } ``` Related: Coffee Bean Cursor, Infinite Perspective Slider, Gooey Counter ### Dot Transition - Slug: `dot-transition` · Tier: Free · Category: Animated Backgrounds - Install: `npx hyperiux add dot-transition` - Docs: https://vault.hyperiux.com/effects/backgrounds/dot-transition · Live demo: https://vault.hyperiux.com/demo/dot-transition - Dependencies: none beyond React - Tags: Canvas - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A dot-matrix text animation for logo reveals, technical intros, loading-adjacent moments, and digital brand sections where typography should feel constructed from a grid. Best used for: - Logo initials, short brand marks, and compact product labels. - AI, cybersecurity, developer-tool, infrastructure, and data product pages. - Technical intros where text should form from a grid. - Loading-adjacent moments where the animation is decorative, not fake progress. - Dark interfaces where dot contrast can create a clean digital reveal. Not for: Not for long words, paragraphs, documentation, legal text, pricing details, instructions, form labels, or critical messages. Not for text that must be read instantly. Dot-matrix formation is atmospheric; it should not delay comprehension of important content. Not for brands where the visual language is soft, editorial, luxury, or calm unless the dot system has been carefully styled to fit. Accessibility and mobile: Expose the actual character, word, or label as accessible text. Do not make assistive technology interpret decorative dots as content. On mobile, reduce grid density, increase letter clarity, and shorten transition duration. For reduced motion, show the final readable text, static dot-letter state, or a non-animated mark without dot growth and shrink cycles. Performance budget: Control grid density, dot size, and active dot count. Animate transform and opacity rather than layout properties. Cache grid positions where possible and avoid recalculating the whole matrix on every frame. On lower-power devices, reduce spacing density, maximum dot scale, or transition frequency. A dot grid should feel engineered, not like it is mining cryptocurrency in the footer. Common mistakes: - Using dot-matrix text for long copy. - Making dots too small or too dense to read. - Forgetting to provide a readable text equivalent. - Animating too many dots at once without performance limits. - Making the hold duration too short for the letter to register. - Treating the dot grid as a real loading indicator when it is only decorative. Props: - `spacing` (number, default 26): Distance between grid cells, in px. - `dotSize` (number, default 2.4): Resting dot size, in px. - `maxDotSize` (number, default 10): Fully "on" dot size, in px. - `growDuration` (number, default 1.8): Seconds for a shape to grow in from the resting grid. - `holdDuration` (number, default 0.05): Seconds a fully formed shape holds before shrinking away. - `shrinkDuration` (number, default 1.8): Seconds for a shape to shrink back down to the resting grid. - `gapDuration` (number, default 0.2): Seconds of plain resting grid between shrink and the next grow. - `revealAnchor` (number, default 0.5): Where shapes grow from / collapse into, as a fraction of height (0 = top, 1 = bottom). - `dotColor` (string, default "#ffffff"): Hex color used for the dots. - `backgroundColor` (string, default "#000000"): Background color behind the dot grid. Usage: ```jsx import DotTransition from '@/components/effects/dot-transition' const page = () => { return (
) } export default page ``` Related: Dither Canvas, Donut Particles ### Dotted Grid Background - Slug: `dotted-grid` · Tier: Free · Category: Animated Backgrounds - Install: `npx hyperiux add dotted-grid` - Docs: https://vault.hyperiux.com/effects/backgrounds/dotted-grid · Live demo: https://vault.hyperiux.com/demo/dotted-grid - Dependencies: none beyond React - Tags: Canvas - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A lightweight dotted grid background that gives SaaS, AI, developer-tool, and technical landing pages a clean structural layer. Best used for: - SaaS and AI hero sections that need quiet technical structure behind readable copy. - Developer-tool pages where a lightweight engineered surface is better than video, particles, or WebGL. - Technical brand sections where the grid supports the message instead of competing with it. Not for: Not for low-contrast text sections, long reading pages, or pages already carrying heavy video/WebGL cost. Accessibility and mobile: Decorative backgrounds should be hidden from assistive technology. On mobile, reduce density and keep foreground contrast high. Performance budget: Keep density low enough to protect text, pause animated canvas work offscreen, and provide a static CSS/image fallback. Common mistakes: - Letting Dotted Grid compete with foreground text. - Animating canvas work offscreen. - Choosing canvas/WebGL when CSS would do the job. Props: - `spacing` (number, default 24): Controls the distance between dots. - `baseRadius` (number, default 7.2): Sets the base dot size. - `mouseRadius` (number, default 380): Sets the dark cursor influence radius. - `trailLength` (number, default 456): Limits how many cursor trail samples are kept. - `trailRadius` (number, default 230): Controls the width of the cursor trail influence. - `trailFadeMs` (number, default 1200): Sets how long trail marks remain visible. - `backgroundColor` (color, default "#000000"): Colors the canvas background. - `showDesktopHint` (boolean, default true): Shows or hides the desktop hint. - `desktopHint` (string, default "Click anywhere to change the pattern."): Desktop hint text. - `mobileHint` (string, default "Works best on desktop"): Mobile hint text shown above the touch instruction. - `className` (string, default ""): Additional class names for the root section. Usage: ```jsx import DottedGrid from '@/components/effects/dotted-grid'; const Page = () => { return ( <> ) } export default Page; ``` Related: Dither Canvas, Grid Lift, Grid Tunnel ### Grid Lift - Slug: `grid-lift` · Tier: Pro · Category: Animated Backgrounds - Install: `npx hyperiux add grid-lift` - Docs: https://vault.hyperiux.com/effects/backgrounds/grid-lift · Live demo: https://vault.hyperiux.com/demo/grid-lift - Dependencies: none beyond React - Tags: Canvas - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A structured WebGL grid effect that raises a technical surface into subtle depth for AI, developer-tool, and product hero sections. Best used for: - Technical product heroes where grid structure supports the brand's engineering signal. - AI and developer-tool launches where depth should feel precise, not cinematic. - Portfolio surfaces where a disciplined grid adds motion without becoming a scene. Not for: Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever. Accessibility and mobile: Keep meaningful content in HTML outside the canvas. On mobile, reduce shader quality and switch to a poster if the scene cannot hold frame rate. Performance budget: Cap DPR at 1.0 on touch/mobile and up to 1.5 on mid-range desktop. Pause Grid Lift offscreen and in hidden tabs, reduce postprocessing before shipping, and keep texture sizes controlled. Common mistakes: - Animating too many cells at once and turning structure into jitter. - Using the grid as the only visual hierarchy in the hero. - Skipping a still frame fallback when the grid motion is decorative. Props: - `maskScale` (number, default 1.08): Scale applied to the text/SVG mask. - `fontSize` (number, default 350): Base font size used to fit the text mask (Text mode only). - `fontWeight` (number, default 200): Font weight used for the text mask (Text mode only). - `interactionRange` (number, default 120): Distance from the mask shape at which cursor interaction starts registering. - `hoverRadius` (number, default 550): Radius of cursor influence over grid cells. - `hoverFalloff` (number, default 1.55): Falloff curve power applied across the hover radius. - `liftRotation` (number, default -88): Direction, in degrees, that lifted cells are extruded toward. - `liftHeight` (number, default 58): Maximum extrusion distance for lifted cells. - `liftSmoothness` (number, default 0.08): Lerp smoothing factor applied to the lift animation. - `gridSpacing` (number, default 13): Spacing between grid cells, in pixels. - `strokeSize` (number, default 1.15): Line width for the grid strokes. - `baseOpacity` (number, default 1): Opacity of the resting (unlifted) grid. - `hoverOpacity` (number, default 0.6): Opacity of the lifted grid highlight. - `backgroundColor` (color, default "#000000"): Canvas background color. - `gridColor` (color, default "#272727"): Color of the resting grid lines. - `hoverColor` (color, default "#ffffff"): Color of the lifted grid highlight. Usage: ```jsx import GridLift from '@/components/effects/grid-lift' const page = () => { return ( <> ) } export default page ``` Related: Grid Tunnel, Chess Grid Transition, Curved Plane, Inertia Image, Infinite Carousel ### Spider Particles Background - Slug: `spider-particles` · Tier: Free · Category: Animated Backgrounds - Install: `npx hyperiux add spider-particles` - Docs: https://vault.hyperiux.com/effects/backgrounds/spider-particles · Live demo: https://vault.hyperiux.com/demo/spider-particles - Dependencies: three - Tags: Three.js - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A connected particle background where moving points form a light network field behind technical product content. Best used for: - Short hero sections where a light network field adds controlled atmosphere behind the message. - Pages that can cap density, pause offscreen, and keep text contrast protected. - Spider Particles adds atmosphere behind the message without making the background the product. Not for: Not for low-contrast text sections, long reading pages, or pages already carrying heavy video/WebGL cost. Accessibility and mobile: Decorative backgrounds should be hidden from assistive technology. On mobile, reduce density and keep foreground contrast high. Performance budget: Keep density low enough to protect text, pause animated canvas work offscreen, and provide a static CSS/image fallback. Common mistakes: - Letting Spider Particles compete with foreground text. - Animating canvas work offscreen. - Choosing canvas/WebGL when CSS would do the job. Props: - `particleCount` (number, default 180): Controls how many particles are drawn. - `gridGap` (number, default 0): Switches to a spaced lattice when above zero. - `particleSize` (number, default 20): Makes each dot larger or smaller. - `mouseConnectDist` (number, default 160): Sets the web connection radius around the cursor. - `spotlightRadius` (number, default 300): Controls the cursor spotlight falloff. - `particleColor` (color, default "#ffffff"): Colors the particles. - `webColor` (color, default "#ffffff"): Colors the cursor connection lines. - `centerColor` (color, default "#ffffff"): Colors the cursor center point. - `showWeb` (boolean, default true): Turns the connection lines on or off. - `particlesGlow` (boolean, default false): Enables glow rendering for particles and cursor points. - `glowColor` (color, default "#ffffff"): Glow color used when particle glow is enabled. Usage: ```jsx import SpiderParticles from '@/components/effects/spider-particles' const spiderParticlesProps = { particleCount:180, gridGap:0, particleSize:20.0, mouseConnectDist:160, spotlightRadius:300, particlesGlow:false, glowColor:0xffffff, particleColor:0xffffff, webColor:0xffffff, centerColor:0xffffff, } const page = () => { return (
) } export default page ``` Related: Dither Canvas, Grid Tunnel, Milky Way, Progressive Bloom Valley ## Animated Buttons (10) ### Animated Toggle - Slug: `animated-toggle` · Tier: Pro · Category: Animated Buttons - Install: `npx hyperiux add animated-toggle` - Docs: https://vault.hyperiux.com/effects/buttons/animated-toggle · Live demo: https://vault.hyperiux.com/demo/animated-toggle - Dependencies: none beyond React - Tags: CSS - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A set of three animated icon toggle buttons, a chevron flip, a cross, and a plus-to-minus, whose box switches between inactive and active colors. Best used for: - Expand, collapse, and dismiss controls where an open or closed state needs visible confirmation. - Interfaces where the selected state matters more than hover decoration. - Animated Toggle adds feedback to an action without weakening semantics, focus, or activation speed. Not for: Not for destructive actions, unclear states, or places where animation hides the label or delays activation. Accessibility and mobile: Use real buttons or anchors, visible focus-visible styles, and clear loading/disabled states. Touch targets should stay large enough on mobile. Performance budget: Keep feedback fast, avoid layout-triggering letter movement, and preserve instant activation. Common mistakes: - Building Animated Toggle with divs instead of real buttons or links. - Hiding the label during hover. - Forgetting loading and disabled states. Props: - `size` (number, default 96): Overall toggle box size in pixels. - `activeColor` (color, default "#ff5f00"): Box color when a toggle is active. - `inactiveColor` (color, default "#a1a1aa"): Box color when a toggle is inactive. - `duration` (number, default 0.32): Icon transition duration in seconds. Usage: ```jsx import AnimatedToggle from "@/components/effects/animated-toggle"; export default function AnimatedTogglePage() { return ( <>
); } ``` Related: Horizontal Feature Reveal, Chess Grid Transition, Milky Way, Fractal Glass ### Arrow Fill Button - Slug: `arrow-fill-button` · Tier: Free · Category: Animated Buttons - Install: `npx hyperiux add arrow-fill-button` - Docs: https://vault.hyperiux.com/effects/buttons/arrow-fill-button · Live demo: https://vault.hyperiux.com/demo/arrow-fill-button - Dependencies: lucide-react - Tags: Lucide - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A directional CTA button where the arrow and fill animation reinforce click intent without delaying the action. Best used for: - Primary CTAs where direction, fill, and label should read as one confident action. - Hero and product sections where feedback must remain faster than hesitation. - Arrow Fill Button adds feedback to an action without weakening semantics, focus, or activation speed. Not for: Not for destructive actions, unclear states, or places where animation hides the label or delays activation. Accessibility and mobile: Use real buttons or anchors, visible focus-visible styles, and clear loading/disabled states. Touch targets should stay large enough on mobile. Performance budget: Keep feedback fast, avoid layout-triggering letter movement, and preserve instant activation. Common mistakes: - Building Arrow Fill Button with divs instead of real buttons or links. - Hiding the label during hover. - Forgetting loading and disabled states. Props: - `btnText` (string, default "Hover Me"): Button label text. - `bgColor` (color, default "#ff5f00"): Resting button background color. - `textColor` (color, default "#ffffff"): Resting label color. - `fillBgColor` (color, default "#ffffff"): Circle fill color before hover. - `fillTextColor` (color, default "#ff5f00"): Label color inside the fill before hover. - `hoverFillBgColor` (color, default "#ffffff"): Expanded fill color on hover. - `hoverFillTextColor` (color, default "#ff5f00"): Label color inside the expanded fill on hover. - `arrowColor` (color): Arrow color before hover. Falls back to fillTextColor when unset. - `hoverArrowColor` (color): Arrow color after hover. Falls back to hoverFillTextColor when unset. - `href` (string, default "#"): Link destination URL for the anchor. Usage: ```jsx import ArrowFillButton from "@/components/effects/arrow-fill-button"; export default function Page() { return ( <>
); } ``` Related: Dot Fill Button, Character Stagger Primary Button, Link Button, Scramble Link Button, Animated Toggle ### Character Stagger Button - Slug: `char-stagger-button` · Tier: Pro · Category: Animated Buttons - Install: `npx hyperiux add char-stagger-button` - Docs: https://vault.hyperiux.com/effects/buttons/char-stagger-button · Live demo: https://vault.hyperiux.com/demo/char-stagger-button - Dependencies: lucide-react - Tags: Lucide - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A typographic button effect where characters lift or stagger on interaction for polished secondary links and CTAs. Best used for: - Secondary links where typographic motion fits the brand and the label stays readable. - Editorial or agency pages where a small letter lift adds craft without slowing navigation. - Character Stagger Button adds feedback to an action without weakening semantics, focus, or activation speed. Not for: Not for destructive actions, unclear states, or places where animation hides the label or delays activation. Accessibility and mobile: Use real buttons or anchors, visible focus-visible styles, and clear loading/disabled states. Touch targets should stay large enough on mobile. Performance budget: Keep feedback fast, avoid layout-triggering letter movement, and preserve instant activation. Common mistakes: - Building Character Stagger Button with divs instead of real buttons or links. - Hiding the label during hover. - Forgetting loading and disabled states. Props: - `text` (string, default "Hover me"): Button label text. - `staggerStep` (number, default 0.01): Delay between each character's hover motion. - `showLine` (boolean, default true): Shows the animated underline. - `hoverColor` (color, default "#ff6b00"): Text color while hovered. - `showArrow` (boolean, default false): Shows the optional arrow icon. - `href` (string, default "#"): Link destination URL for the anchor. Usage: ```jsx import CharStaggerButton from "@/components/effects/char-stagger-button"; export default function Page() { return ( <>
); } ``` Related: Butterfly Trail Cursor, Mouse Pixelation, Milky Way, Hover Stack ### Character Stagger Primary Button - Slug: `char-stagger-primary-button` · Tier: Pro · Category: Animated Buttons - Install: `npx hyperiux add char-stagger-primary-button` - Docs: https://vault.hyperiux.com/effects/buttons/char-stagger-primary-button · Live demo: https://vault.hyperiux.com/demo/char-stagger-primary-button - Dependencies: lucide-react - Tags: Lucide - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A primary CTA button with controlled character-stagger motion for hero sections, launch pages, and conversion-focused actions. Best used for: - Hero CTAs where the primary action needs a polished but immediate response. - Launch pages that want typographic craft without making conversion wait. - Character Stagger Primary Button adds feedback to an action without weakening semantics, focus, or activation speed. Not for: Not for destructive actions, unclear states, or places where animation hides the label or delays activation. Accessibility and mobile: Use real buttons or anchors, visible focus-visible styles, and clear loading/disabled states. Touch targets should stay large enough on mobile. Performance budget: Keep feedback fast, avoid layout-triggering letter movement, and preserve instant activation. Common mistakes: - Building Character Stagger Primary Button with divs instead of real buttons or links. - Hiding the label during hover. - Forgetting loading and disabled states. Props: - `text` (string, default "Hover me"): Button label text. - `staggerStep` (number, default 0.01): Delay between each character's hover motion. - `hoverColor` (color, default "#ffffff"): Text color while hovered. - `bgColor` (color, default "#ff6b00"): Background color of the button. - `showArrow` (boolean, default false): Shows the optional arrow icon. - `href` (string, default "#"): Link destination URL for the anchor. Usage: ```jsx import CharStaggerPrimaryButton from "@/components/effects/char-stagger-primary-button"; export default function Page() { return ( <>
); } ``` Related: Character Stagger Button, Donut Particles, Arrow Fill Button, Grid Tunnel ### Dot Fill Button - Slug: `dot-fill-button` · Tier: Pro · Category: Animated Buttons - Install: `npx hyperiux add dot-fill-button` - Docs: https://vault.hyperiux.com/effects/buttons/dot-fill-button · Live demo: https://vault.hyperiux.com/demo/dot-fill-button - Dependencies: none beyond React - Tags: CSS - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A compact animated button where a dot expands into a fill state for card actions, graphic CTAs, and branded interfaces. Best used for: - Compact card actions and graphic CTA systems where dot expansion matches the visual language. - Interfaces where the fill can confirm hover or focus without moving the target. - Dot Fill Button adds feedback to an action without weakening semantics, focus, or activation speed. Not for: Not for destructive actions, unclear states, or places where animation hides the label or delays activation. Accessibility and mobile: Use real buttons or anchors, visible focus-visible styles, and clear loading/disabled states. Touch targets should stay large enough on mobile. Performance budget: Keep feedback fast, avoid layout-triggering letter movement, and preserve instant activation. Common mistakes: - Building Dot Fill Button with divs instead of real buttons or links. - Hiding the label during hover. - Forgetting loading and disabled states. Props: - `btnText` (string, default "Try demo"): Button label text. - `bgColor` (color, default "#ff6b00"): Resting button background color. - `textColor` (color, default "#ffffff"): Resting label color. - `hoverTextColor` (color, default "#ff6b00"): Label color while filled. - `dotColor` (color, default "#ffffff"): Dot color. - `href` (string, default "#"): Link destination URL for the anchor. Usage: ```jsx import DotFillBtn from "@/components/effects/dot-fill-button"; export default function Page() { return (
); } ``` Related: Grid Tunnel, Hover Slider, Phantom Image Trail, Circular Split Roll, Scroll Distortion ### Link Button - Slug: `link-button` · Tier: Free · Category: Animated Buttons - Install: `npx hyperiux add link-button` - Docs: https://vault.hyperiux.com/effects/buttons/link-button · Live demo: https://vault.hyperiux.com/demo/link-button - Dependencies: lucide-react - Tags: Lucide - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A lightweight animated link button for navigation, secondary actions, and product pages that need subtle interaction feedback. Best used for: - Secondary actions and navigation links that need a small designed state, not drama. - Product and docs pages where lightweight feedback supports orientation. - Link Button adds feedback to an action without weakening semantics, focus, or activation speed. Not for: Not for destructive actions, unclear states, or places where animation hides the label or delays activation. Accessibility and mobile: Use real buttons or anchors, visible focus-visible styles, and clear loading/disabled states. Touch targets should stay large enough on mobile. Performance budget: Keep feedback fast, avoid layout-triggering letter movement, and preserve instant activation. Common mistakes: - Building Link Button with divs instead of real buttons or links. - Hiding the label during hover. - Forgetting loading and disabled states. Props: - `text` (string, default "Hover me"): Button label text. - `mobileText` (string, default "Click me"): Label used on compact viewports. - `textColor` (color, default "#ffffff"): Resting label and underline color. - `hoverColor` (color, default "#ff6b00"): Hover label and underline color. - `clickedColor` (color, default "#ff6b00"): Compact viewport color after tapping. - `underlineHeight` (number, default 1.5): Underline thickness in pixels. - `showIcon` (boolean, default true): Shows or hides the arrow icon. - `transitionDuration` (number, default 0.5): Animation duration in seconds. - `href` (string, default "#"): Link destination URL, also read in the screen-reader label. Usage: ```jsx import LinkButton from "@/components/effects/link-button"; export default function Page() { return ( <>
); } ``` Related: Arrow Fill Button, Scramble Link Button, Dot Fill Button, Character Stagger Primary Button ### Metallic Button - Slug: `metallic-button` · Tier: Free · Category: Animated Buttons - Install: `npx hyperiux add metallic-button` - Docs: https://vault.hyperiux.com/effects/buttons/metallic-button · Live demo: https://vault.hyperiux.com/demo/metallic-button - Dependencies: lucide-react - Tags: Lucide - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A premium button component for luxury interfaces, product launches, portfolio CTAs, pricing actions, and dark landing pages where the button should feel tactile, weighty, and deliberately finished. Best used for: - Premium hero CTAs and conversion sections. - Luxury, fashion, creative studio, AI, cyber, and high-craft SaaS pages. - Portfolio contact buttons and launch-page actions. - Dark UI environments where chrome highlights create clear separation. - Product preview, request access, and paid purchase buttons. Not for: Not for low-priority links, dense dashboards, destructive actions, form field controls, documentation navigation, or pages that need a plain utility interface. Not for every CTA. Metallic treatment works because it feels rare. Use it everywhere and the page becomes a showroom for button anxiety. Not for tiny buttons where the material detail cannot be seen. Accessibility and mobile: Use real button or anchor semantics, visible focus states, sufficient contrast, and clear labels. Provide disabled and loading states that remain understandable without relying on color alone. On mobile, use a stable highlight or simplified pressed state. Pointer-follow reflections should be disabled or simplified on touch devices. For reduced motion, freeze reflection movement, remove hover travel, and keep a static metallic surface. Performance budget: Keep the highlight system lightweight. Prefer CSS gradients, shadows, transforms, and opacity over heavy filters or large blurred layers. Avoid running pointer updates when the button is inactive, offscreen, or on touch devices. Keep shadow and blur values controlled. Metallic surfaces need crispness. Too much glow turns chrome into fog. Common mistakes: - Making the label too low-contrast. - Using metallic shine without clear button boundaries. - Forgetting keyboard focus styles. - Applying chrome treatment to too many actions. - Letting pointer-follow highlights block clicks. - Making the hover state look like loading. - Using a premium material style on a page with no matching visual system. Props: - `label` (string, default "Get Started"): Button label text. - `viewMode` (string, default "text"): Renders the label or a single sparkle icon. - `baseColor` (color, default "#000000"): Dark base the metal sits on. - `sheenColor` (color, default "#ffffff"): Overlay tint; sets how warm or cold the chrome reads. - `bandCount` (number, default 4): Density of the stripe bands. - `edgeBlur` (number, default 0.5): Colour transition sharpness: 0 is a hard edge, 1 a smooth gradient. - `flowAngle` (number, default 45): Direction the pattern flows, in degrees. - `zoom` (number, default 8): Zoom into the pattern; higher reads as brighter chrome. - `warp` (number, default 0): Noise warp over the stripe pattern. - `redFringe` (number, default 0.3): Red-channel dispersion; drives the warm edge fringing. - `blueFringe` (number, default 0.3): Blue-channel dispersion; drives the cool edge fringing. - `idleSpeed` (number, default 0.6): Sweep speed at rest. - `hoverSpeed` (number, default 1): Sweep speed while hovered. - `clickSpeed` (number, default 2.4): Sweep speed kicked on click, before settling back. Usage: ```jsx import MetallicButton from "@/components/effects/metallic-button"; export default function Page() { return ( <>
); } ``` Related: Shiny Button, Border Beam, Arrow Fill Button, Dot Fill Button ### Scramble Link Button - Slug: `scramble-link-button` · Tier: Free · Category: Animated Buttons - Install: `npx hyperiux add scramble-link-button` - Docs: https://vault.hyperiux.com/effects/buttons/scramble-link-button · Live demo: https://vault.hyperiux.com/demo/scramble-link-button - Dependencies: lucide-react - Tags: Lucide - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A technical link button effect where text briefly scrambles before resolving for AI, cyber, and developer-tool CTAs. Best used for: - Technical brand links where a fast decode effect supports the visual tone. - Secondary CTAs that can settle instantly before the user loses the label. - Scramble Link Button adds feedback to an action without weakening semantics, focus, or activation speed. Not for: Not for destructive actions, unclear states, or places where animation hides the label or delays activation. Accessibility and mobile: Use real buttons or anchors, visible focus-visible styles, and clear loading/disabled states. Touch targets should stay large enough on mobile. Performance budget: Keep feedback fast, avoid layout-triggering letter movement, and preserve instant activation. Common mistakes: - Building Scramble Link Button with divs instead of real buttons or links. - Hiding the label during hover. - Forgetting loading and disabled states. Props: - `text` (string, default "Hover me"): Button label text. - `textColor` (color, default "#ffffff"): Default text color. - `hoverColor` (color, default "#ff6b00"): Text color while hovered or pressed. - `showLine` (boolean, default true): Shows the animated underline. - `showArrow` (boolean, default false): Shows the optional arrow icon. - `scrambleDuration` (number, default 1000): Total scramble duration in milliseconds. - `stepMs` (number, default 50): Delay between scramble frames. - `revealStagger` (number, default 1.4): Controls how characters resolve across the word. - `href` (string, default "#"): Link destination URL for the anchor. Usage: ```jsx import ScrambleLinkButton from "@/components/effects/scramble-link-button"; export default function Page() { return ( <>
); } ``` Related: Character Stagger Button, Arrow Fill Button, Link Button, Dot Fill Button ### Shiny Button - Slug: `shiny-button` · Tier: Free · Category: Animated Buttons - Install: `npx hyperiux add shiny-button` - Docs: https://vault.hyperiux.com/effects/buttons/shiny-button · Live demo: https://vault.hyperiux.com/demo/shiny-button - Dependencies: none beyond React - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A glossy animated button component for hero CTAs, pricing actions, upgrade prompts, product launches, and conversion sections where the primary action needs a little more pull. Best used for: - Primary CTAs in hero sections. - Pricing, checkout, upgrade, and premium-access actions. - Launch pages where one action needs stronger pull. - SaaS, AI, developer-tool, and digital-product interfaces. - Dark UI sections where glow and shine can create clean contrast. Not for: Not for every button on the page. Not for destructive actions, legal confirmations, subtle secondary links, dense dashboards, form controls, or navigation items that should stay quiet. Not for CTAs with unclear copy. Shine can attract attention, but it cannot make “Click here” worth clicking. Accessibility and mobile: Use real button or anchor semantics, readable labels, visible focus states, and sufficient contrast. The shine should never reduce label clarity. On touch devices, use a stable active or hover-safe visual state instead of relying on cursor position. For reduced motion, freeze the shine, remove continuous movement, or show a static polished surface. Performance budget: Keep the visual layer lightweight. Prefer CSS gradients, masks, opacity, and transform over heavy filters or constant JavaScript-driven animation. Avoid running pointer calculations when the button is offscreen or inactive. Limit glow blur and animated texture density. A CTA should feel polished, not like it brought its own rendering engine to a checkout flow. Common mistakes: - Applying shiny treatment to every CTA. - Letting the animated surface reduce label readability. - Using divs instead of real buttons or anchors. - Forgetting focus-visible states. - Making the shine look like a loading indicator. - Running pointer-driven animation on touch devices without fallback. - Styling a weak CTA instead of improving the action copy. Props: - `label` (string, default "Get Started"): Button label text. - `fillColor` (color, default "#000000"): Button fill colour inside the animated border. - `labelColor` (color, default "#ffffff"): Label colour. - `accentColor` (color, default "#ff5f00"): Colour of the rotating border arc, inner shimmer, and hover glow. - `accentSoftColor` (color, default "#ff9253"): Shine colour the border eases into while hovered. - `sweepDuration` (number, default 3): Seconds for one full rotation of the border gradient. - `easeDuration` (number, default 0.8): Seconds for the hover ease into the wider, brighter border. - `arcWidth` (number, default 5): Resting width of the bright border arc, as a percentage. - `cornerRadius` (number, default 32): Corner radius in pixels; 32 and above render as a full pill at the default height. - `showSpeckle` (boolean, default true): Shows the masked dot pattern layer. - `showSheen` (boolean, default true): Shows the rotating inner sheen. - `speckleOpacity` (number, default 0.4): Strength of the dot pattern layer. Usage: ```jsx import ShinyButton from "@/components/effects/shiny-button"; export default function Page() { return ( <>
); } ``` Related: Border Beam, Arrow Fill Button, Dot Fill Button, Character Stagger Primary Button ### Spotlight Button - Slug: `spotlight-button` · Tier: Pro · Category: Animated Buttons - Install: `npx hyperiux add spotlight-button` - Docs: https://vault.hyperiux.com/effects/buttons/spotlight-button · Live demo: https://vault.hyperiux.com/demo/spotlight-button - Dependencies: none beyond React - Tags: CSS - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A cursor-reactive button component for hero CTAs, product actions, pricing sections, waitlist prompts, and premium landing pages where the primary action should feel lit, focused, and ready to press. Best used for: - Primary CTAs in hero sections. - Pricing, upgrade, booking, and premium-access actions. - SaaS, AI, developer-tool, and digital-product pages. - Dark UI sections where light can create strong button separation. - Product launches and waitlist flows where the CTA needs more presence. Not for: Not for every button on the page. Not for destructive actions, legal confirmations, dense dashboards, quiet navigation links, or form controls that need utility more than atmosphere. Not for unclear CTA copy. A spotlight can draw attention to the button, but it cannot make “Submit” feel like a strategy. Accessibility and mobile: Use real button or anchor semantics, readable labels, visible focus states, sufficient contrast, and clear disabled or loading states. The spotlight should never reduce label clarity. On touch devices, use a static highlight, pressed state, or simplified glow instead of cursor-led movement. For reduced motion, freeze the spotlight, remove sweeping light movement, and keep a static illuminated surface. Performance budget: Keep the spotlight effect lightweight. Prefer CSS gradients, opacity, transform, and masks over heavy filters or constant JavaScript work. If pointer tracking is used, throttle updates or keep motion outside React state where possible. Disable pointer-follow calculations when the button is offscreen, inactive, disabled, or on touch devices. The button should feel responsive, not like a tiny lighting engine with conversion goals. Common mistakes: - Applying spotlight treatment to every CTA. - Letting the glow reduce label readability. - Using pointer-follow lighting without a mobile fallback. - Forgetting keyboard focus states. - Making the spotlight look like a loading state. - Letting decorative layers block clicks. - Using the effect to compensate for weak CTA hierarchy. Props: - `haloColor` (string, default "#ff5f00"): Main color of the orbiting halo. - `haloCoreColor` (string, default "#ff9253"): Bright core color on hover and keyboard focus. - `spotlightIntensity` (number, default 1): Strength of the border spotlight and glow. - `orbitDuration` (number, default 3): Seconds for one full orbit. - `settleDuration` (number, default 0.8): Hover and focus transition duration in seconds. - `haloWidth` (number, default 5): Width of each halo gradient segment as a percentage of the sweep. - `size` ("sm" | "md" | "lg", default "md"): Button size: small, medium, or large. - `overlayColor` (string, default "bg-black/30"): Tailwind class for the tint layered over the inner spotlight. Usage: ```jsx // Built using Hyperiux Vault: https://vault.hyperiux.com import SpotlightButton from "@/components/effects/spotlight-button"; export default function Page() { return ( <>
); } ``` Related: Metallic Button, Border Beam, Shiny Button ## Carousel Effects (11) ### Arc Flow Carousel - Slug: `arc-flow-carousel` · Tier: Free · Category: Carousel Effects - Install: `npx hyperiux add arc-flow-carousel` - Docs: https://vault.hyperiux.com/effects/carousels/arc-flow-carousel · Live demo: https://vault.hyperiux.com/demo/arc-flow-carousel - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A curved image carousel for portfolios, campaign galleries, editorial showcases, product stories, and brand sections where visual cards should feel like they are moving through a shared arc. Best used for: - Portfolio and case-study highlights where visuals need a staged presentation. - Campaign galleries, lookbooks, and editorial image sequences. - Product showcases where each image deserves a focused card moment. - Brand-led landing pages where motion and composition are part of the selling point. - Visual archives that need more theatre than a grid but more structure than scattered cards. Not for: Not for dense ecommerce catalogues, pricing tables, testimonial lists, documentation, comparison sections, or content that users need to scan quickly. Not for large uncurated image sets. A curved carousel should feel selected, not like a folder view with ambition. Not for pages where direct comparison matters more than presentation. Use a grid when users need to compare items side by side. Accessibility and mobile: Use real buttons for navigation and provide clear labels for previous, next, and active item states. Preserve keyboard navigation, visible focus styles, and a logical reading order. On mobile, reduce arc depth, overlap, and card rotation. A flatter swipe-friendly layout may be better than forcing the full desktop arc into a narrow screen. For reduced motion, switch between cards with a minimal fade, instant state change, or simplified translate without depth rotation. Performance budget: Keep the number of visible cards controlled, optimise images, reserve carousel dimensions, and animate transform and opacity rather than layout properties. Avoid excessive blur, oversized shadows, and constant recalculation during drag or scroll. If the carousel supports dragging, throttle pointer work and avoid React state updates on every tiny movement. The interaction should feel fluid before it feels elaborate. Common mistakes: - Using too many cards. - Making the curve so dramatic that images become hard to inspect. - Letting cards overlap captions or controls. - Ignoring keyboard navigation. - Using inconsistent image ratios without a layout rule. - Treating the carousel as storage for every unused visual. - Keeping autoplay active near important reading or conversion sections. Props: - `smoothing` (number, default 5.5): How fast the fan catches up to the pointer. Higher feels snappier. - `momentum` (number, default 1): Flick distance multiplier after release. - `dragSensitivity` (number, default 1.2): How far the fan travels per pixel dragged or scrolled. - `autoRotateSpeed` (number, default 0): Constant idle drift in rad/s. Positive drifts new cards in from the left. - `pauseOnHover` (boolean, default true): Pauses the idle drift while a pointer hovers the carousel. - `snap` (boolean, default false): Snaps to the nearest card once a flick or wheel input settles. - `radiusRatio` (number, default 0.85): Circle radius as a multiple of the container width. Bigger is a flatter arc. - `cardRatio` (number, default 0.21): Card width as a fraction of the container width, clamped by min/max card width. - `maxCardWidth` (number, default 320): Upper bound on card width, in pixels. - `cardAspect` (number, default 0.62): Card width divided by height. - `overlap` (number, default -0.04): 0 = cards touch edge to edge, 0.3 = overlap by 30%, negative = a gap between them. - `arcOffset` (number, default 0.5): Vertical position of the leading card's centre, as a fraction of height. - `surfaceColor` (string, default "#000000"): Shared hex color for the carousel background and wheel surface. Usage: ```jsx import ArcFlowCarousel from '@/components/effects/arc-flow-carousel' const Page = () => { return ( <> ) } export default Page ``` Related: Infinite Carousel, Interactive List Preview, Infinite Perspective Slider, Sticky Content Wrapper ### Clip Path Slider - Slug: `clippath-slider` · Tier: Pro · Category: Carousel Effects - Install: `npx hyperiux add clippath-slider` - Docs: https://vault.hyperiux.com/effects/carousels/clippath-slider · Live demo: https://vault.hyperiux.com/demo/clippath-slider - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A carousel effect that reveals images through clip-path masks for portfolios, lookbooks, campaign visuals, and product showcases. Best used for: - Portfolio and campaign showcases where shape masks are part of the art direction. - Equal-weight visual slides with visible controls, swipe, and a non-carousel fallback for critical proof. - Clip Path Slider supports visual browsing when a grid would feel flat and comparison is not the priority. Not for: Not for critical proof, pricing, feature comparisons, or content users must see to convert. Accessibility and mobile: Use visible controls, keyboard navigation, swipe, and aria-live="polite" for meaningful slide changes. Mobile controls must remain reachable. Performance budget: Optimize images, lazy-load offscreen slides carefully, and pause autoplay when inactive or offscreen. Common mistakes: - Using Clip Path Slider to hide critical conversion content. - Autoplaying without pause controls. - Skipping keyboard and swipe support. Props: - `slides` (array, default [{"name":"Motion Systems","description":"Crafting immersive motion-driven interfaces with smooth transitions, interactive timelines, and modern animation systems.","image":"https://picsum.photos/seed/1/800/600"},{"name":"Creative Components","description":"A curated collection of expressive UI components designed for futuristic web experiences and rapid development.","image":"https://picsum.photos/seed/2/800/600"},{"name":"Visual Interactions","description":"Building visually rich interactions with hover effects, layered depth, dynamic layouts, and fluid user feedback.","image":"https://picsum.photos/seed/3/800/600"},{"name":"Future Interfaces","description":"Exploring next-generation interface patterns that blend cinematic motion with minimal and functional design.","image":"https://picsum.photos/seed/4/800/600"},{"name":"Design Engine","description":"Creating scalable design systems and reusable interface architectures optimized for modern frontend workflows.","image":"https://picsum.photos/seed/5/800/600"},{"name":"Scroll Experiences","description":"Designing immersive scroll-based storytelling experiences powered by fluid motion and seamless transitions.","image":"https://picsum.photos/seed/6/800/600"},{"name":"Interactive Layers","description":"Combining lighting, gradients, and layered compositions to create premium interactive web experiences.","image":"https://picsum.photos/seed/7/800/600"}]): Slides rendered by the clip-path sweep transition (name, description, image). - `clueText` (string, default "Click either side and watch the next scene cut through."): Instructional hint shown above the slider. - `showClue` (boolean, default true): Shows the instructional clue text above the slider. - `cursorBg` (color, default "#ff5f00"): Background color of the custom directional cursor. - `cursorLineColor` (color, default "#ffffff"): Color of the arrow lines inside the custom cursor. - `duration` (number, default 0.75): Clip-path transition duration. Usage: ```jsx import ClipPathSlider from '@/components/effects/clippath-slider' const Page = () => { return ( <> ) } export default Page ``` Related: Scroll Stack, Horizontal Feature Reveal, Scroll Distortion, Phantom Image Trail ### Depth Card Stack - Slug: `depth-card-stack` · Tier: Pro · Category: Carousel Effects - Install: `npx hyperiux add depth-card-stack` - Docs: https://vault.hyperiux.com/effects/carousels/depth-card-stack · Live demo: https://vault.hyperiux.com/demo/depth-card-stack - Dependencies: gsap, lucide-react - Tags: GSAP, Lucide - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A layered card stack component that adds shallow depth to service, feature, and proof card groups. Best used for: - Service, feature, or proof groups where a small card set should feel layered and curated. - Sections where every card still needs a real heading, copy, and link in document order. - Feature or proof groups where layered depth improves hierarchy without hiding any card. Not for: Not for long comparison sets, dense pricing matrices, or card groups where users need to scan every item quickly. Accessibility and mobile: Cards need real headings and links in source order. On mobile, flatten depth into a simple vertical stack or swipe-free card group. Performance budget: Keep the card count small, animate transform and opacity rather than layout, and avoid re-rendering the entire stack when one card receives focus or hover. Common mistakes: - Using depth to hide lower-priority cards. - Making hover the only way to reveal card content. - Letting stacked cards overlap focus rings or links. Props: - `duration` (number, default 0.55): Card navigation transition duration. - `mouseInteraction` (boolean, default true): Enables pointer tilt and texture reveal on the active card. - `lerp` (number, default 0.18): Pointer-follow smoothing amount; higher values track faster. - `smoothness` (number, default 0.4): Hover enter/leave smoothing duration for card tilt and texture reveal. Usage: ```jsx import DepthCardStack from '@/components/effects/depth-card-stack' const Page = () => { return ( <> ) } export default Page ``` Related: Infinite Carousel, Progressive Bloom Valley, Draggable Canvas ### Dimensional Switch Slider - Slug: `dimensional-switch-slider` · Tier: Free · Category: Carousel Effects - Install: `npx hyperiux add dimensional-switch-slider` - Docs: https://vault.hyperiux.com/effects/carousels/dimensional-switch-slider · Live demo: https://vault.hyperiux.com/demo/dimensional-switch-slider - Dependencies: gsap, lucide-react - Tags: GSAP, Lucide - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A 3D-feeling carousel for portfolios, campaign sections, product stories, and brand showcases where each slide should feel like a physical panel entering the scene. Best used for: - Portfolio highlights where each project needs a focused visual card. - Product feature groups that deserve more presence than a static list. - Agency and studio service sections where motion can reinforce craft. - Campaign landing pages with a small set of visual story beats. - Premium hero or mid-page sections where slide changes should feel spatial. Not for: Not for long lists, dense feature comparisons, pricing tables, testimonials that need quick scanning, legal information, or documentation. Not for slides with too much text. A dimensional panel is not a brochure page wearing a mask. Not for pages where the user needs to compare all items at once. Use a grid when comparison matters more than presentation. Accessibility and mobile: Use real buttons for previous and next controls. Add clear labels, keyboard support, visible focus states, and predictable slide order. Announce slide changes only when useful; do not spam assistive technology on every decorative motion frame. On mobile, reduce perspective intensity, simplify card rotation, and keep controls easy to tap. For reduced motion, switch slides with a fade, instant state change, or minimal translate without 3D depth. Performance budget: Keep the slide count controlled, optimise images, reserve the card dimensions, and animate transform and opacity rather than layout properties. Avoid large shadows, heavy filters, and unnecessary 3D stacking across many elements. Do not keep offscreen slides doing expensive work. Pause or simplify animation when the section is outside the viewport. Common mistakes: - Using too many slides. - Making card motion stronger than the content. - Letting slide dimensions jump between items. - Hiding text inside images. - Ignoring keyboard navigation. - Using 3D motion on mobile without simplifying it. - Treating the slider as storage for every idea that did not fit elsewhere. Props: - `infinite` (boolean, default true): Wraps from the last item back to the first (and vice versa) instead of clamping and disabling the prev/next buttons at the ends. - `direction` (string, default "horizontal"): Axis the card flips around - horizontal flips on Y with text sliding/tilting left-right, vertical flips on X with text sliding/tilting up-down. - `autoplay` (boolean, default true): Automatically advances to the next slide on a timer. - `autoplayDelay` (number, default 2600): Time between automatic slide changes in milliseconds. - `ease` (string, default "cubic-bezier(1, -0.001, 0.159, 0.838)"): CSS cubic-bezier(...) string or a plain GSAP ease name - drives the card flip and both text tweens. - `textColor` (string, default "#ffffff"): Color applied to the slide text. - `textSize` (number | string, default 84): Font size of the slide text. Numbers are treated as pixels; strings can use any CSS length. - `cardWidth` (number | string, default 680): Width of the card. Numbers are treated as pixels; strings can use any CSS length. - `cardHeight` (number | string, default 460): Height of the card. Numbers are treated as pixels; strings can use any CSS length. - `cardBorderRadius` (number | string, default 16): Border radius applied to both card faces. Numbers are treated as pixels; strings can use any CSS length. - `cardClassName` (string, default "max-md:w-[85vw]! max-md:h-[75vw]! max-lg:w-[85vw]! max-lg:h-[55vw]!"): Extra classes appended to the card's own wrapper div. Usage: ```jsx import DimensionalSwitchSlider from '@/components/effects/dimensional-switch-slider' const Page = () => { return ( <> ) } export default Page ``` Related: Helix Slider, Scroll Stack, Stacking Cards, Sticky Content Wrapper ### Ellipse Carousel - Slug: `ellipse-carousel` · Tier: Free · Category: Carousel Effects - Install: `npx hyperiux add ellipse-carousel` - Docs: https://vault.hyperiux.com/effects/carousels/ellipse-carousel · Live demo: https://vault.hyperiux.com/demo/ellipse-carousel - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). An elliptical image carousel for portfolios, visual archives, campaign pages, moodboards, and brand-led sections where the collection should feel spatial, light, and explorable. Best used for: - Creative portfolios and studio homepages where image atmosphere matters. - Campaign, fashion, travel, lifestyle, and photography galleries. - Brand moodboards and visual archives. - Product-world sections where surrounding visuals support one central idea. - Editorial landing pages where the layout should feel spatial without becoming heavy. Not for: Not for dense catalogues, search-driven galleries, pricing content, documentation, comparison tables, forms, or content that needs linear reading. Not for image sets with no visual relationship. Ellipse Carousel can arrange a collection beautifully, but it cannot create curation where none exists. Not for sections where the centre message must compete with large moving cards. Accessibility and mobile: Preserve a logical reading order even when cards are visually distributed around the ellipse. Use real controls if the carousel is interactive, and provide accessible labels for image cards, active states, or view changes where applicable. On mobile, simplify the ellipse into a stacked, swipeable, or flatter orbital layout. Keep the central message visible and avoid placing tiny cards too close to screen edges. For reduced motion, render a static ellipse, a simple grid, or a minimal fade between states. Performance budget: Control the number of cards, optimise images, set fixed card dimensions, and animate transform and opacity rather than layout properties. Recalculate positions only on meaningful resize changes. Avoid large shadows, oversized images, and constant animation loops when the carousel is outside the viewport. The field should feel light, not like every card is carrying a rendering invoice. Common mistakes: - Making the layout look random instead of elliptical. - Letting cards overlap the central message. - Using too many small images. - Forgetting alt text or accessible treatment for visual cards. - Running continuous motion even when the section is offscreen. - Forcing the desktop ellipse onto mobile. - Using the effect for content that needs direct comparison or filtering. Props: - `backgroundColor` (string, default "#eeeeee"): Background fill behind the carousel stage. - `centerLabel` (string, default "Ellipse Carousel"): Text shown at the center of the ellipse when enabled. - `showCenterLabel` (boolean, default true): Shows or hides the center label. - `cardWidth` (number, default 130): Card width at the largest active position, in pixels. - `cardHeight` (number, default 180): Card height at the largest active position, in pixels. - `minScale` (number, default 0.2): Minimum scale applied to the farthest cards on the ellipse. - `radiusXRatio` (number, default 0.25): Horizontal ellipse radius as a fraction of the stage width. - `radiusYRatio` (number, default 0.36): Vertical ellipse radius as a fraction of the stage height. - `autoPlay` (boolean, default true): Automatically advances the carousel by one card at a time. - `holdDuration` (number, default 1): Seconds to hold on the active card before advancing. - `stepDuration` (number, default 0.7): Seconds for the snap transition between cards. - `pauseOnHover` (boolean, default true): Pauses autoplay while hovering a card. - `draggable` (boolean, default true): Allows users to drag the ellipse by hand. - `dragSensitivity` (number, default 1): Multiplier on the carousel's angular drag response. Usage: ```jsx import EllipseCarousel from '@/components/effects/ellipse-carousel' const Page = () => { return ( <> ) } export default Page ``` Related: Infinite Carousel, Hover Slider, Infinite Perspective Slider, Hover Stack, Sticky Content Wrapper ### Infinite Carousel - Slug: `infinite-carousel` · Tier: Pro · Category: Carousel Effects - Install: `npx hyperiux add infinite-carousel` - Docs: https://vault.hyperiux.com/effects/carousels/infinite-carousel · Live demo: https://vault.hyperiux.com/demo/infinite-carousel - Dependencies: gsap, lucide-react - Tags: GSAP, Lucide - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). Let users drag, tap, or browse through looping cards when the section needs momentum instead of a hard first-to-last ending. Best used for: - Product, property, and campaign card sets where browsing is exploratory. - Visual collections where drag and arrow controls make the section feel active. - Medium-sized card groups where looping helps movement but does not replace discovery. Not for: Not for pricing, legal copy, critical proof, comparison tables, or content users must see all at once. Not for long card archives where filtering, search, or a grid would serve the visitor better. Accessibility and mobile: Provide arrow buttons, keyboard access, visible focus, and swipe support. Screen readers should encounter each real item once. Reduced-motion users should get a non-looping or static sequence. Performance budget: Keep card count reasonable, lazy-load heavy media, avoid expensive re-renders during drag, and clean up pointer and animation listeners on unmount. Common mistakes: - Duplicating looped cards in the accessibility tree. - Autoplaying the carousel without pause or user control. - Making drag the only way to reach hidden cards. Props: - `infinite` (boolean, default true): Loops the carousel endlessly instead of stopping at the last card. - `snap` (boolean, default true): Settles the track on the nearest card after a drag or scroll. - `draggable` (boolean, default true): Allows dragging the carousel with pointer and touch input. - `showNav` (boolean, default true): Shows or hides the previous and next arrow buttons. - `autoPlay` (boolean, default false): Automatically advances the carousel one card at a time. - `autoPlayInterval` (number, default 3000): Milliseconds between automatic slide advances. - `tiltOnScroll` (boolean, default false): Leans the cards into a fast swipe, then springs them back to level. - `tiltStrength` (number, default 4.2): How far the cards lean when tilt on scroll is enabled. - `lerpFactor` (number, default 0.12): Easing factor for the track - lower glides longer, higher snaps tighter. - `dragSensitivity` (number, default 0.005): How far the track moves per pixel of drag. - `snapStrength` (number, default 0.1): How firmly the track is pulled towards the nearest card. - `cardWidth` (number, default 33.8): Desktop card width in viewport width units. The default shows 2.8 cards at a time. - `cardHeight` (number, default 60): Card height in viewport height units. - `gap` (number, default 1.9): Spacing between cards in viewport width units. - `bgColor` (color, default "#f4f0ea"): Background color behind the carousel. Usage: ```jsx import InfiniteCarousel from "@/components/effects/infinite-carousel"; const page = () => { return ( ); }; export default page; ``` Related: Helix Slider, Horizontal Feature Reveal, Character Trail, Rotation Slider ### Orbit Flip Slider - Slug: `orbit-flip-slider` · Tier: Free · Category: Carousel Effects - Install: `npx hyperiux add orbit-flip-slider` - Docs: https://vault.hyperiux.com/effects/carousels/orbit-flip-slider · Live demo: https://vault.hyperiux.com/demo/orbit-flip-slider - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A layout-switching image carousel for portfolios, lookbooks, visual archives, and campaign pages where a group of images should feel rearrangeable rather than locked into one static grid. Best used for: - Photography portfolios and visual case-study sections. - Fashion, lifestyle, art, and campaign galleries. - Studio pages where a visual archive needs a more interactive presentation. - Product image sets where multiple viewing modes help exploration. - Editorial pages where layout change is part of the experience. Not for: Not for dense product grids, ecommerce catalogues, comparison tables, pricing content, documentation, testimonials that need quick scanning, or image sets with hundreds of items. Not for pages where users need predictable sorting and fast filtering. A visual orbit is not a replacement for information architecture. Not for low-quality images. Motion can arrange a weak image set, but it cannot make it worth studying. Accessibility and mobile: Use semantic buttons for view-mode controls. Provide visible focus states, active states, and readable labels. Preserve a logical reading and tab order even when the visual layout changes. On mobile, simplify layouts. A full orbit may become cramped, so use a flat, stacked, or swipe-friendly version. For reduced motion, switch layouts instantly or with a minimal fade and no flip, orbit, or depth movement. Performance budget: Keep the image count controlled, optimise image assets, lazy-load where appropriate, and animate transform and opacity instead of layout properties. Avoid expensive filters, unbounded 3D transforms, or constant recalculation across every pointer move. Do not render full-resolution images for every card if smaller display sizes are enough. The slider should feel fluid before it feels fancy. Common mistakes: - Using too many images. - Making view modes visually impressive but functionally confusing. - Hiding active control state. - Letting cards overlap important text or controls. - Ignoring mobile layout simplification. - Applying the effect to image sets that need filtering, sorting, or direct comparison. - Forgetting to optimise image sizes. Props: - `backgroundColor` (string, default "#e9e9ea"): Background color behind the ring. - `imageWidth` (number, default 90): Width of each image card in pixels. - `imageHeight` (number, default 140): Height of each image card in pixels. - `imageGap` (number, default 0): Extra spacing between image cards in pixels. - `roundedness` (number, default 0): Image card corner radius in pixels. - `enableHoverMovement` (boolean, default true): Enables the hover lift and perspective tilt on image cards. - `hoverMoveY` (number, default -8): Vertical movement applied to the image card on hover, in pixels. - `perspectiveRotateValue` (number, default 180): How far each card rotates on hover, in degrees. - `perspectiveRotateDirection` (string, default "right"): Direction each card rotates on hover. - `rotate` (boolean, default true): Continuously and slowly rotates the ring of cards. - `rotateSpeed` (number, default 4): Speed of the automatic rotation, in degrees per second. - `stopRotationOnHover` (boolean, default true): Pauses the automatic rotation while the pointer is hovering the slider. - `flatRadiusX` (number, default 1.6): Horizontal stretch of the flat circle, as a multiplier of its base radius. - `flatRadiusY` (number, default 1.2): Vertical stretch of the flat circle, as a multiplier of its base radius. - `flatScale` (number, default 1): Uniform zoom on the flat circle as a whole - position spread and card size together. - `ringRotateX` (number, default 31): Rotates the ring's plane on the x axis, in degrees. Swings the near/far cards vertically apart. - `ringRotateY` (number, default 56): Rotates the ring on the y axis, in degrees. Spins which card faces the camera. - `ringRotateZ` (number, default -25): Rotates the whole projected ring on the z axis, in degrees. Spins the composition in place, like a wheel face. - `ringRadiusX` (number, default 1.5): Horizontal stretch of the ring, as a multiplier of its base radius. - `ringRadiusY` (number, default 1.2): Vertical stretch of the ring, as a multiplier of its base radius. - `ringScale` (number, default 1): Uniform zoom on the ring as a whole - position spread and card size together, like moving the camera closer or further on the z axis. - `tiltRotateX` (number, default 70): Rotates the tilt view's ring on the x axis, in degrees. - `tiltRotateY` (number, default 0): Rotates the tilt view's ring on the y axis, in degrees. Shifts which part of the upper arc is centered. - `tiltRotateZ` (number, default 0): Rotates the whole projected tilt composition on the z axis, in degrees. - `tiltRadiusX` (number, default 1.9): Horizontal stretch of the tilt view, as a multiplier of its base radius. - `tiltRadiusY` (number, default 1.5): Vertical stretch of the tilt view, as a multiplier of its base radius. - `tiltScale` (number, default 1.2): Uniform zoom on the tilt view as a whole. - `tiltMoveY` (number, default 300): Pans the tilt view up or down, in pixels, without affecting its rotation, stretch or zoom. - `galleryRotateX` (number, default 10): Rotates the gallery coverflow's ring on the x axis, in degrees. - `galleryRotateY` (number, default 0): Rotates the gallery coverflow on the y axis, in degrees. Spins which card faces the camera. - `galleryRotateZ` (number, default 0): Rotates the whole projected gallery composition on the z axis, in degrees. - `galleryRadiusX` (number, default 1.3): Horizontal stretch of the gallery coverflow, as a multiplier of its base radius. - `galleryRadiusY` (number, default 1.5): Vertical stretch of the gallery coverflow, as a multiplier of its base radius. - `galleryScale` (number, default 1.2): Uniform zoom on the gallery coverflow as a whole. Usage: ```jsx import OrbitFlipSlider from '@/components/effects/orbit-flip-slider' const Page = () => { return ( <> ) } export default Page ``` Related: Scroll Stack, Scroll Distortion, Infinite Perspective Slider, Horizontal Feature Reveal ### Parallax Strip Slider - Slug: `parallax-strip-slider` · Tier: Free · Category: Carousel Effects - Install: `npx hyperiux add parallax-strip-slider` - Docs: https://vault.hyperiux.com/effects/carousels/parallax-strip-slider · Live demo: https://vault.hyperiux.com/demo/parallax-strip-slider - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A split-image carousel for portfolios, campaign pages, product showcases, editorial visuals, and brand-led landing sections where image transitions should feel designed rather than simply swapped. Best used for: - Portfolio highlights and case-study showcases. - Campaign visuals, editorial spreads, and launch imagery. - Product renders, dashboard previews, and template galleries. - Fashion, lifestyle, visual identity, and photography-led pages. - Hero sections where slide transitions need more depth than a flat fade. Not for: Not for dense catalogues, pricing tables, documentation, testimonial lists, product comparison grids, or content users need to scan quickly. Not for weak images. Strip motion can make a good image feel premium; it cannot rescue a mediocre asset wearing too much transition perfume. Not for pages where users need immediate image comparison. Use a grid when comparison matters more than presentation. Accessibility and mobile: Use real buttons for previous and next controls. Provide visible focus states, accessible labels, and predictable keyboard behavior. Keep slide order logical and ensure captions remain readable outside the visual transition. On mobile, reduce strip count, parallax distance, and transition duration. For reduced motion, switch slides with a fade, instant state change, or minimal translate without segmented movement. Performance budget: Keep the slide count controlled, optimise images, reserve carousel dimensions, and limit strip count. Animate transform and opacity rather than layout properties. Avoid heavy filters, oversized images, and unnecessary per-frame recalculation. Do not render full-resolution images for every strip when smaller display sizes are enough. A strip slider should feel fluid before it feels elaborate. Common mistakes: - Using too many strips. - Letting the transition hide the image for too long. - Mixing inconsistent image ratios without a cropping rule. - Making navigation unclear. - Hiding meaningful text inside image assets. - Keeping autoplay active near important reading or conversion sections. - Treating the strip effect as the content instead of the handoff. Props: - `stripCount` (number, default 12): Number of vertical strips the incoming slide is revealed through. - `revealDuration` (number, default 0.5): Duration of each strip's clip-path wipe, in seconds. - `stripStagger` (number, default 0.04): Delay between consecutive strips as they wipe in, in seconds. - `zoomFrom` (number, default 1.2): Starting scale of the incoming image before it settles to 1 (Ken-Burns zoom). - `zoomDuration` (number, default 0.9): Duration of the image zoom settle, in seconds. - `autoplay` (boolean, default false): Auto-advance slides on a 5s timer. Paused while a transition is running and under reduced motion. - `showProgressBar` (boolean, default true): Show the thin progress bar across the top of the slider. - `showCounter` (boolean, default true): Show the numeric slide counter in the bottom-right. - `showControls` (boolean, default true): Enable the click-to-navigate overlay and its circular cursor (left half = previous, right half = next). - `mobNavButton` (boolean, default true): Show the manual previous/next buttons under the title on tablet and mobile. Requires showControls. - `showClue` (boolean, default true): Show the hint pill telling the viewer to click either side to navigate. - `accentColor` (color, default "#ffffff"): Color of the slide title, progress bar fill, caption text, counter, and control borders. Usage: ```jsx import ParallaxStripSlider from "@/components/effects/parallax-strip-slider"; export default function page() { return ( <> ); } ``` Related: Strip Slider, Clip Path Slider, Zoom Slider, 3D Portfolio Slider ### Ring Carousel - Slug: `ring-carousel` · Tier: Pro · Category: Carousel Effects - Install: `npx hyperiux add ring-carousel` - Docs: https://vault.hyperiux.com/effects/carousels/ring-carousel · Live demo: https://vault.hyperiux.com/demo/ring-carousel - Dependencies: gsap, lucide-react - Tags: GSAP, Lucide - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). Arrange a small visual set around a circular focus point, keeping the active item prominent while the collection stays in view. Best used for: - Curated visual galleries where a circular composition fits the art direction. - Portfolio or campaign sections with a small number of equal-weight images. - Pages where one active item should stay framed by the surrounding set. Not for: Not for large archives, pricing, testimonials, dense text, or product sets that require side-by-side comparison. Not for mobile-first pages unless the ring collapses into a simple swipeable or stacked layout. Accessibility and mobile: Use real controls, keyboard support, visible focus states, and a logical slide order. On mobile, flatten the ring into a swipeable carousel or stacked gallery. Reduced-motion users should get the same images without circular motion. Performance budget: Keep the slide count controlled, pre-size images, animate transforms instead of layout, and avoid heavy blur or shadow effects across the full ring. Common mistakes: - Making the circular layout the only way to understand the slide order. - Hiding controls because the ring looks “obvious.” - Using too many images until the carousel becomes a decorative wheel. Props: - `snap` (boolean, default true): Snaps the ring to the nearest item after drag. - `autoPlay` (boolean, default true): Rotates the carousel automatically. - `pauseOnHover` (boolean, default true): Pauses autoplay while the carousel is hovered. - `showNavigation` (boolean, default true): Shows previous and next buttons. - `showDots` (boolean, default true): Shows pagination dots. - `cardSize` (number, default 1): Multiplier applied to carousel card width and height. - `cardWidth` (number, default 720): Carousel card width in pixels. - `cardHeight` (number, default 450): Carousel card height in pixels. - `roundedness` (number, default 20): Carousel card corner radius in pixels. Usage: ```jsx import RingCarousel from "@/components/effects/ring-carousel"; const page = () => { return ( <> ); }; export default page; ``` Related: Helix Slider, WebGL Slider, Stacking Cards, Sticky Content Wrapper ### WebGL Slider - Slug: `webgl-slider` · Tier: Pro · Category: Carousel Effects - Install: `npx hyperiux add webgl-slider` - Docs: https://vault.hyperiux.com/effects/carousels/webgl-slider · Live demo: https://vault.hyperiux.com/demo/webgl-slider - Dependencies: gsap, lenis, three - Tags: GSAP, Lenis, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). Move image slides through shader-led transitions so campaign visuals, product shots, and portfolio frames feel authored rather than swapped. Best used for: - Portfolio and campaign visuals where transition quality is part of the brand. - Image-led case studies that need a richer slide change than a translateX animation. - Launch pages where the slider is a feature visual, not a hidden content drawer. Not for: Not for pricing, testimonials, critical proof, legal content, or anything users must compare side by side. Not for pages where a static grid would help users decide faster. Accessibility and mobile: Use visible controls, keyboard navigation, swipe support, and polite announcements for meaningful user-initiated slide changes. On reduced motion, remove shader distortion and use a simple static or fading transition. Performance budget: Compress images, cap DPR, lazy-load non-critical textures, pause rendering offscreen, avoid heavy postprocessing by default, and dispose of textures on route change. Common mistakes: - Putting slide labels and links only inside WebGL. - Autoplaying without pause controls. - Making the shader transition more important than the slide content. Props: - `distortionStrength` (number, default 1): Strength of the shader fold distortion as slides scroll past. - `transitionDuration` (number, default 0.6): Duration of the scroll-snap settle animation. - `enableHoverEffect` (boolean, default true): Enables the pointer-driven hover bend on each slide. - `imageWidth` (number, default 3.2): WebGL slide plane width. - `imageHeight` (number, default 3): WebGL slide plane height. Usage: ```jsx import WebGLSlider from '@/components/effects/webgl-slider' const page = () => { return ( <> ) } ``` Related: Ring Carousel, Helix Slider, Zoom Slider ### Zoom Slider - Slug: `zoom-slider` · Tier: Free · Category: Carousel Effects - Install: `npx hyperiux add zoom-slider` - Docs: https://vault.hyperiux.com/effects/carousels/zoom-slider · Live demo: https://vault.hyperiux.com/demo/zoom-slider - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A visual carousel where the active slide moves forward with depth for product imagery, case studies, and image-led sections. Best used for: - Product and project showcases where the active image should step forward with controlled depth. - Visual browsing sections where comparison is optional and controls stay obvious. - Zoom Slider supports visual browsing when a grid would feel flat and comparison is not the priority. Not for: Not for critical proof, pricing, feature comparisons, or content users must see to convert. Accessibility and mobile: Use visible controls, keyboard navigation, swipe, and aria-live="polite" for meaningful slide changes. Mobile controls must remain reachable. Performance budget: Optimize images, lazy-load offscreen slides carefully, and pause autoplay when inactive or offscreen. Common mistakes: - Using Zoom Slider to hide critical conversion content. - Autoplaying without pause controls. - Skipping keyboard and swipe support. Props: - `scaleOnHover` (boolean, default true): Enables the image scale-up effect on hover. - `textOnHover` (boolean, default true): Enables the hover text reveal above each slide. - `size` (number, default 1): Multiplier applied to zoom slider card width and height. - `easeScrollPercentage` (number, default 100): Controls how much scroll distance the card uses to grow and shrink. Higher values make the zoom change more gradually. Usage: ```jsx import ZoomSlider from '@/components/effects/zoom-slider' const page = () => { return ( <> ) } ``` Related: Clip Path Slider, Helix Slider, Infinite Perspective Slider, Rotation Slider ## Scroll Effects (24) ### Cards Runway - Slug: `cards-runway` · Tier: Pro · Category: Scroll Effects - Install: `npx hyperiux add cards-runway` - Docs: https://vault.hyperiux.com/effects/scroll-effects/cards-runway · Live demo: https://vault.hyperiux.com/demo/cards-runway - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). Turn a group of feature or story cards into a staged runway sequence where each idea gets a clean moment before the next one arrives. Best used for: - AI, SaaS, and product sections where multiple related benefits need staged attention. - Editorial explainers where each card is one chapter in a short argument. - Service or feature groups where a flat grid feels too passive but a full carousel feels too heavy. Not for: Not for comparison tables, pricing cards, legal content, dense documentation, or long card copy that users need to scan quickly. Not for sections where every card needs to be visible at once before a decision can be made. Accessibility and mobile: Cards should be real HTML in the intended reading order. On mobile, switch to a clean vertical stack, simple swipe, or static cards. Reduced-motion users should see the same content without runway movement, stagger, or large transforms. Performance budget: Keep card count controlled, animate transform and opacity instead of layout, pre-size the card container, and avoid expensive blur or shadow effects on every card during movement. Clean up scroll or pointer listeners when the component unmounts. Common mistakes: - Writing cards like paragraphs instead of sharp content beats. - Using too many cards until the sequence loses its rhythm. - Letting z-index or overlap hide focus states, links, or card text. - Keeping desktop card movement on small touch screens without a fallback. Props: - `accentColor` (color, default "#ff5f00"): Accent color used by the runway card bars. - `cardColor` (color, default "#161616"): Background color of each card. - `textColor` (color, default "#ffffff"): Color of the card text. - `ease` (string, default "power1.out"): GSAP ease for the cards popping up into place. - `gap` (number, default 48): Spacing between runway cards in pixels. Usage: ```jsx import CardsRunway from '@/components/effects/cards-runway' const Page = () => { return ( <>

Cards Runway

Drag

) } export default Page ``` Related: Clip Path Slider, Card Drift, Gooey Counter, Number Counter ### Circular Slider - Slug: `circular-slider` · Tier: Pro · Category: Scroll Effects - Install: `npx hyperiux add circular-slider` - Docs: https://vault.hyperiux.com/effects/scroll-effects/circular-slider · Live demo: https://vault.hyperiux.com/demo/circular-slider - Dependencies: gsap, lucide-react - Tags: GSAP, Lucide - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A circular carousel effect that rotates visual items into focus for campaigns, portfolios, testimonials, and feature highlights. Best used for: - Equal-weight testimonials or features where taking turns suits the content better than comparison. - Testimonial or feature sets where items take turns holding focus. - Circular Slider creates a concrete scroll outcome that a static section would not deliver. Not for: Not for important proof, pricing, or long text where rotation makes content feel optional. Not for testimonials or features that should remain visible as proof at all times. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Rotating important proof out of view too quickly. - Shipping continuous motion without pause or static fallback.Letting the turning cadence overpower the item content. Props: - `items` (array, default []): Cards arranged around the circular carousel. - `title` (string, default "Interfaces that react."): Primary heading shown above the rotating carousel. - `subtitle` (string, default "Built for motion, crafted for experience."): Supporting text shown below the rotating carousel. - `showBottomText` (boolean, default true): Shows or hides the bottom supporting text. - `verticalOffset` (number, default 0): Moves the whole slider wheel up (negative) or down (positive), in vh. - `gap` (number, default 24): Additional spacing between cards along the wheel arc. - `cardWidth` (number, default 320): Desktop width of each orbiting card in pixels. - `cardHeight` (number, default 360): Desktop height of each orbiting card in pixels. - `cardColorCount` (number, default 5): How many card background colors to cycle through the cards (1 to the number of cards). - `cardColor1` (string, default "#655A7C"): Card background color 1. - `cardColor2` (string, default "#AB92BF"): Card background color 2. - `cardColor3` (string, default "#AFC1D6"): Card background color 3. - `cardColor4` (string, default "#CEF9F2"): Card background color 4. - `cardColor5` (string, default "#D6CA98"): Card background color 5. - `cardColor6` (string, default "#F2B5A7"): Card background color 6. - `textColorCount` (number, default 5): How many card text colors to cycle through the cards (1 to the number of cards). - `textColor1` (string, default "#2A2433"): Card text color 1. - `textColor2` (string, default "#3D2E50"): Card text color 2. - `textColor3` (string, default "#2C3E52"): Card text color 3. - `textColor4` (string, default "#1A5C53"): Card text color 4. - `textColor5` (string, default "#4A3F1A"): Card text color 5. - `textColor6` (string, default "#5C2A1F"): Card text color 6. Usage: ```jsx import CircularSlider from '@/components/effects/circular-slider' const Page = () => { return ( <> ) } export default Page ``` Related: Liquid Glass Cursor, Split Canvas, Scroll Distortion, File Encryption, Elevate Navbar ### Circular Split Roll - Slug: `circular-split-roll` · Tier: Free · Category: Scroll Effects - Install: `npx hyperiux add circular-split-roll` - Docs: https://vault.hyperiux.com/effects/scroll-effects/circular-split-roll · Live demo: https://vault.hyperiux.com/demo/circular-split-roll - Dependencies: gsap, lenis - Tags: GSAP, Lenis - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A spatial slider that moves related items around a central focus point for product groups, service clusters, and curated showcases. Best used for: - Small product or service groups where one active item should stay framed by its surrounding context. - Small groups of related services or products gathered around a theme. - Circular Split Roll creates a concrete scroll outcome that a static section would not deliver. Not for: Not for large product sets, pricing choices, or items that users need to compare side by side. Not for product groups where orbiting motion makes hierarchy less obvious. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Creating an orbit without a meaningful center. - Letting surrounding items obscure the active item. - Using circular motion for content that needs fast scanning. Props: - `radius` (number, default 500): Radius of both rotating rings. - `cardSize` (number, default 205): Size of the right-rail image cards. - `textSideScale` (number, default 0.68): Title scale away from the center. - `textSideOpacity` (number, default 0.18): Title opacity away from the center. Usage: ```jsx import CircularSplitRoll from "@/components/effects/circular-split-roll"; export default function Page() { return ( <> ); } ``` Related: Helix Slider, Zoom Slider, Rotation Slider, Infinite Perspective Slider, Hover Slider ### Grid Scale - Slug: `grid-scale` · Tier: Pro · Category: Scroll Effects - Install: `npx hyperiux add grid-scale` - Docs: https://vault.hyperiux.com/effects/scroll-effects/grid-scale · Live demo: https://vault.hyperiux.com/demo/grid-scale - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A scroll-linked grid effect that scales selected cards to guide attention toward the most important item. Best used for: - Pricing or feature grids where one card deserves emphasis without breaking the table structure. - Pricing or product grids where one featured item deserves a beat of prominence. - Turns feature-grid scanning into emphasis, making the differentiating card harder to miss. Not for: Not for dense matrices where every row and column needs equal scanning weight. Not for grids where emphasis would misrepresent feature priority or pricing logic. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Scaling with width or height instead of transform. - Letting enlarged cards clip focus outlines or overlap neighbors. - Emphasizing a card that is not actually the priority. Props: - `bgColor` (color, default "#242424"): Background color of the section. - `panelColor` (color, default "#ffffff"): Background color of the expanding center panel. - `convergeStagger` (number, default 0.7): Total stagger spread (seconds) as the floating keyword pills converge to center. Usage: ```jsx import GridScale from '@/components/effects/grid-scale' const page = () => { return ( <> ) } export default page ``` Related: Clip Path Slider, Helix Slider, Butterfly Trail Cursor, Phantom Image Trail, Dither Canvas ### Helix Slider - Slug: `helix-slider` · Tier: Pro · Category: Scroll Effects - Install: `npx hyperiux add helix-slider` - Docs: https://vault.hyperiux.com/effects/scroll-effects/helix-slider · Live demo: https://vault.hyperiux.com/demo/helix-slider - Dependencies: @react-three/fiber, three - Tags: React Three Fiber, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A Three.js-powered image slider for portfolios, campaign pages, visual archives, product showcases, and experimental landing pages where cards should move through space instead of sitting in a flat row. Best used for: - Creative portfolios and agency pages where image presentation needs depth. - WebGL-led landing pages where a normal carousel would feel too flat. - Campaign galleries, digital archives, and product-world sections. - AI, developer-tool, cyber, and experimental brand pages where 3D motion supports the identity. - Visual showcases where the collection matters as a system, not only as individual slides. Not for: Not for dense ecommerce catalogues, documentation, pricing sections, comparison tables, forms, testimonials, or content users need to scan quickly. Not for weak or inconsistent image sets. A helix can make strong visuals feel dimensional; it cannot turn random assets into a curated world. Not for pages that cannot afford WebGL cost. If the site already has heavy shaders, video backgrounds, and scroll scenes, adding another 3D gallery without budgets is not ambition. It is a performance incident with better lighting. Accessibility and mobile: Provide a non-WebGL content equivalent when the gallery communicates meaningful work, products, or projects. The images should have meaningful alt text or supporting DOM content outside the canvas where appropriate, because canvas-rendered imagery is not automatically accessible as structured page content. On mobile, simplify the scene. Reduce panel count, camera movement, rotation depth, and texture size. Consider a static preview, horizontal fallback, or simplified DOM carousel if the WebGL version becomes cramped. For reduced motion, stop continuous rotation, remove pointer-reactive drift, and show a stable gallery state or static fallback. The user should not have to orbit through motion to understand the section. Performance budget: Cap DPR, optimise textures, limit visible panels, and avoid unnecessary geometry. Use useFrame carefully; do not push expensive React state updates through the render loop. Keep per-frame work inside Three.js refs wherever possible. Pause or reduce motion when the section is offscreen. Avoid loading large textures before the section is likely to be viewed. On lower-power devices, reduce panel count, texture size, rotation speed, and any expensive material treatment. A practical target is to keep the scene visually rich but operationally boring: stable frame pacing, limited GPU pressure, no memory spikes, and no surprise battery tax. Common mistakes: - Treating a WebGL slider like a normal CSS carousel. - Loading oversized textures for small panels. - Updating React state inside useFrame on every tick. - Making the helix too dense for the images to be understood. - Forgetting a mobile fallback. - Putting meaningful content only inside canvas without an accessible equivalent. - Running the scene continuously when it is offscreen. - Using 3D depth when the page only needed a clean image grid. Props: - `autoplaySpeed` (number, default 0.12): Idle movement speed; 0 stops autoplay. - `radius` (number, default 2.8): Width of the spiral. - `turns` (number, default 3.3): Number of spiral twists. - `cardScale` (number, default 1): Scales image cards proportionally. - `dragSensitivity` (number, default 0.006): How strongly the gallery responds to dragging. - `scrollIntensity` (number, default 1): Multiplier for how far each wheel or trackpad scroll spins the helix. - `inertiaDecay` (number, default 2.2): Higher values stop movement sooner after release. - `background` (color, default "#0d0d0d"): Gallery background. Usage: ```jsx import HelixSlider from '@/components/effects/helix-slider' const page = () => { return ( <> ) } ``` Related: 3D Portfolio Slider, Orbit Flip Slider, Ring Carousel, Ellipse Carousel ### Horizontal Feature Reveal - Slug: `horizontal-feature-reveal` · Tier: Free · Category: Scroll Effects - Install: `npx hyperiux add horizontal-feature-reveal` - Docs: https://vault.hyperiux.com/effects/scroll-effects/horizontal-feature-reveal · Live demo: https://vault.hyperiux.com/demo/horizontal-feature-reveal - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A horizontal feature reveal scroll animation that moves visitors sideways through chaptered content while they continue scrolling vertically. Best used for: - Campaign and agency narratives that need a small set of horizontal chapters with a vertical fallback. - Campaign and agency narratives told as a small set of horizontal chapters. - Turns a methodology or campaign page into a chaptered sequence that feels authored rather than assembled. Not for: Not for long mobile-first pages, docs, pricing, or routes where sideways movement would hide orientation. Not for mobile audiences without a well-tested vertical fallback - horizontal scroll fatigue on touch is real and fast. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Forgetting a visible progress cue when panels move sideways. - Letting horizontal motion fight anchor links or browser restoration. - Keeping wide desktop panels on touch instead of stacking chapters. Props: - `bgColor` (color, default "#ffffff"): Background color of the section. - `textColor` (color, default "#000000"): Color of the section text. - `translateX` (number, default 30): Image parallax travel as a percentage of the image width. Each image starts at -translateX% and scrolls to +translateX%. - `cardGap` (number, default 15): Gap between industry cards, in vw. Usage: ```jsx import HorizontalFeatureReveal from "@/components/effects/horizontal-feature-reveal"; const Page = () => { return ( ); }; export default Page; ``` Related: Infinite Perspective Slider, Zoom Slider, Rotation Slider, Scroll Stack, Sticky Content Wrapper ### Infinite Perspective Slider - Slug: `infinite-perspective-slider` · Tier: Free · Category: Scroll Effects - Install: `npx hyperiux add infinite-perspective-slider` - Docs: https://vault.hyperiux.com/effects/scroll-effects/infinite-perspective-slider · Live demo: https://vault.hyperiux.com/demo/infinite-perspective-slider - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A depth-led infinite slider that adds perspective, motion, and continuity to portfolio showcases, launch pages, and visual sequences. Best used for: - Portfolio and AI launch sequences that need depth without committing to a full WebGL scene. - Portfolio chapters and launch pages that want depth without a full WebGL scene. - Infinite Perspective Slider creates a concrete scroll outcome that a static section would not deliver. Not for: Not for dense product lists, accessibility-critical sequences, or pages where perspective makes the active item harder to judge. Not for routes where search traffic lands mid-sequence and needs immediate context. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Duplicating loop items without making the active item obvious. - Letting perspective clipping create horizontal overflow. - Treating depth as a substitute for a real sequence. Props: - `cardWidth` (number, default 320): Desktop card width. - `cardGap` (number, default 24): Spacing between cards. - `perspective` (number, default 2200): 3D perspective depth. - `scrollSpeed` (number, default 1): Scroll and drag movement multiplier. - `scrollLerp` (number, default 0.1): How quickly the slider catches its target. - `maxRotation` (number, default 80): Maximum card tilt angle. Usage: ```jsx import InfinitePerspectiveSlider from "@/components/effects/infinite-perspective-slider"; export default function Page() { return ( <> ); } ``` Related: Helix Slider, Scroll Stack, Horizontal Feature Reveal, Rotation Slider ### Parallax Footer - Slug: `parallax-footer` · Tier: Pro · Category: Scroll Effects - Install: `npx hyperiux add parallax-footer` - Docs: https://vault.hyperiux.com/effects/scroll-effects/parallax-footer · Live demo: https://vault.hyperiux.com/demo/parallax-footer - Dependencies: lucide-react - Tags: Lucide - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A footer reveal effect that turns the end of a page into a polished final scroll moment. Best used for: - Long pages where the final CTA or footer should feel arrived at, not bolted on. - Long pages where the final CTA or sitemap should feel arrived at, not dropped. - Parallax Footer creates a concrete scroll outcome that a static section would not deliver. Not for: Not for utility footers where visitors need immediate links, legal pages, or task flows that should end quickly. Not for footers that primarily serve as a fast sitemap or legal navigation block. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Letting the reveal delay access to legal, contact, or sitemap links. - Creating gaps or overlap at the bottom of the scroll range. - Using footer motion on short pages where the footer is already visible. Props: - `containerBgColor` (string, default "#ff6b00"): Background color of the intro container above the footer reveal. - `footerBgColor` (string, default "#1a1a1a"): Background color of the fixed footer panel. Usage: ```jsx import ParallaxFooter from "@/components/effects/parallax-footer"; const page = () => { return ( ); }; export default page; ``` Related: Scroll Stack, 3D Portfolio Slider, Parallax Gallery, Horizontal Feature Reveal ### Parallax Gallery - Slug: `parallax-gallery` · Tier: Pro · Category: Scroll Effects - Install: `npx hyperiux add parallax-gallery` - Docs: https://vault.hyperiux.com/effects/scroll-effects/parallax-gallery · Live demo: https://vault.hyperiux.com/demo/parallax-gallery - Dependencies: gsap, lenis - Tags: GSAP, Lenis - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A multi-column parallax gallery where images drift at different speeds to create depth for editorial, fashion, photography, and visual campaign pages. Best used for: - Editorial or lifestyle galleries where atmosphere should arrive before detailed product comparison. - Editorial, fashion, and lifestyle pages that want atmosphere before the spec sheet. - Extends editorial or fashion pages without requiring more copy - the depth is the argument. Not for: Not for ecommerce catalogues, image-heavy archives, or pages where speed-to-grid matters more than atmosphere. Not for pages where image loading speed is the primary conversion variable - parallax offsets add render cycles. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Setting column offset so large that images partially exit the viewport before the section ends. - Running the same multi-speed drift on touch instead of reducing it to a stable image stack. - Loading unoptimized images into parallax columns - parallax adds render cost; unoptimized images multiply it. Props: - `bgColor` (color, default "#111111"): Background color of the gallery section. - `borderColor` (color, default "rgba(255, 255, 255, 0.5)"): Color of the dashed border around the center frame. - `rotationDeg` (number, default 6): Max rotation (degrees) applied to off-center slides as they scroll past. - `offscreenScale` (number, default 1.2): Scale applied to off-center slides relative to the centered one. - `frameScale` (number, default 1): Multiplier on the center frame's width/height. Usage: ```jsx import ParallaxGallery from '@/components/effects/parallax-gallery' const page = () => { return ( <> ) } ``` Related: Scroll Stack, 3D Portfolio Slider, Horizontal Feature Reveal, Infinite Perspective Slider ### Parallax Image - Slug: `parallax-image-animation` · Tier: Pro · Category: Scroll Effects - Install: `npx hyperiux add parallax-image-animation` - Docs: https://vault.hyperiux.com/effects/scroll-effects/parallax-image-animation · Live demo: https://vault.hyperiux.com/demo/parallax-image-animation - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A lightweight single-image parallax effect that adds subtle scroll depth to hero visuals, product photography, and section breaks. Best used for: - Hero visuals and section breaks where a single image needs quiet depth without stealing the copy. - Hero and section-break visuals that need a quiet sense of weight. - Parallax Image creates a concrete scroll outcome that a static section would not deliver. Not for: Not for image-critical shopping, documentation, or pages where the picture must stay perfectly stable for evaluation. Not for pages where motion makes product detail harder to inspect than a still image. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Setting offsets larger than the safe crop area. - Adding parallax where precise image inspection matters. - Forgetting to reserve image dimensions before motion starts. Props: - `translateY` (number, default 30): Parallax travel as a percentage of the image height. The image starts at -translateY% and scrolls to +translateY%. - `enableScale` (boolean, default false): Enables scale animation while scrolling. - `scaleFrom` (number, default 1.6): Initial image scale. - `scaleTo` (number, default 1.2): Final image scale. Usage: ```jsx import ParallaxImageAnimation from"@/components/effects/parallax-image-animation"; const page = () => { return ( <> ); }; export default page; ``` Related: Scroll Stack, 3D Portfolio Slider, Parallax Gallery, Horizontal Feature Reveal ### Parallax Slider - Slug: `parallax-slider` · Tier: Pro · Category: Scroll Effects - Install: `npx hyperiux add parallax-slider` - Docs: https://vault.hyperiux.com/effects/scroll-effects/parallax-slider · Live demo: https://vault.hyperiux.com/demo/parallax-slider - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A layered scroll slider that adds parallax depth to visual case studies, product showcases, and campaign galleries. Best used for: - Case-study or product-angle sequences that need guided browsing inside the normal scroll path. - Case-study and product-angle sequences that stay on the normal scroll path. - Parallax Slider creates a concrete scroll outcome that a static section would not deliver. Not for: Not for critical comparisons, pricing, or long product lists where a static gallery would be faster. Not for slide sets where users must compare every item before acting. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Letting layer offsets obscure captions or controls. - Using a slider where visitors need side-by-side comparison. - Treating scroll-linked depth like a carousel that traps the page. Props: - `parallaxAmount` (number, default 25): Percent horizontal shift each image parallaxes as it crosses the viewport. - `slideGap` (number, default 1.6): Gap between slides, in vw. - `scrub` (number, default 1): GSAP ScrollTrigger scrub value on the main horizontal track - higher lags/smooths more, lower tracks scroll 1:1. - `images` (string[], default ["https://picsum.photos/seed/h01/1600/1200","https://picsum.photos/seed/h02/1600/1200","https://picsum.photos/seed/h03/1600/1200","https://picsum.photos/seed/h07/1600/1200","https://picsum.photos/seed/h05/1600/1200","https://picsum.photos/seed/h06/1600/1200"]): Image URLs for the slides; even-indexed slides render wide, odd ones narrow. Usage: ```jsx import ParallaxSlider from '@/components/effects/parallax-slider' const page = () => { return ( <> ) } export default page ``` Related: Liquid Glass Cursor, Progressive Bloom Valley, File Encryption, Expanding Navbar, Zoom Slider ### Ribbon Drift - Slug: `ribbon-drift` · Tier: Pro · Category: Scroll Effects - Install: `npx hyperiux add ribbon-drift` - Docs: https://vault.hyperiux.com/effects/scroll-effects/ribbon-drift · Live demo: https://vault.hyperiux.com/demo/ribbon-drift - Dependencies: gsap, lenis - Tags: GSAP, Lenis - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). Shape selected work into a guided showcase where each project has room to earn the click before the visitor moves on. Best used for: - Agency and studio homepages where selected work needs movement before the portfolio link. - Campaign pages where visual fragments should drift through the section as proof of craft. - Portfolio teasers where motion creates energy but each project still has a real title, context, and link. Not for: Not for large work archives, comparison-heavy portfolios, filterable case-study libraries, or pages where visitors need to scan every project quickly. Not for project sections where the ribbon hides titles, makes links hard to reach, or turns real work into background texture. Accessibility and mobile: Project items need readable names, links, and focus states in DOM order. On mobile, collapse the ribbon into stacked cards, a simple horizontal scroll, or a tap-safe project list. Reduced-motion users should see the same work without drifting movement. Performance budget: Keep the media set controlled, pre-size images, compress assets, animate transforms instead of layout, and pause ribbon movement when the section is offscreen. Avoid loading a whole portfolio archive into a decorative strip. Common mistakes: - Making the ribbon the only way to access project links. - Moving items so quickly that titles and visuals cannot be understood. - Loading too many large images before the section enters the viewport. - Forgetting that hover-rich portfolio effects still need focus and touch equivalents. Props: - `driftSpeed` (number, default 1): Speed of the ribbon drift. - `blockSize` (number, default 1): Size of the card blocks that hold the images in the ribbon strips. - `showNames` (boolean, default true): Shows project names on hover. When off, the card hover effect is disabled too. - `textColor` (color, default "#ffffff"): Color of the project name revealed inside a card block on hover. - `borderWidth` (number, default 0): Border width of the card blocks in pixels. - `borderColor` (string, default "#ffffff"): Border color of the card blocks. - `borderRadius` (number, default 0): Corner radius of the card blocks in pixels. Usage: ```jsx import RibbonDrift from '@/components/effects/ribbon-drift' const page = () => { return ( <> ) } ``` Related: Rectangular Text Reveal, Helix Slider, Rotation Slider, Scroll Distortion, Rope Cursor ### Rotation Slider - Slug: `rotation-slider` · Tier: Free · Category: Scroll Effects - Install: `npx hyperiux add rotation-slider` - Docs: https://vault.hyperiux.com/effects/scroll-effects/rotation-slider · Live demo: https://vault.hyperiux.com/demo/rotation-slider - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A lightweight slider that uses angled rotation between slides for campaign visuals, product shots, and energetic visual sequences. Best used for: - Short visual sequences where an angled transition matches the campaign art direction. - Short visual slide sets that want a crafted, angled transition. - Rotation Slider creates a concrete scroll outcome that a static section would not deliver. Not for: Not for task-heavy pages or large visual sets where angled transitions slow evaluation. Not for sections where the transition has more personality than the content. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes Common mistakes: - Increasing the angle until slide content becomes harder to read. - Using rotation on dense text or task-heavy screens. - Letting decorative motion outlast the user's intent. Props: - `rotationAmount` (number, default 1): How far each card rotates as it scrolls past. - `verticalDrift` (number, default 1): How far each card drifts vertically as it scrolls past. - `scrollSmoothing` (number, default 1): Scroll lag on the track; higher is smoother. - `perspective` (number, default 1200): Perspective depth in pixels; lower looks deeper. - `showCaptions` (boolean, default true): Shows the text caption overlay on each card. - `textColor` (color, default "#ffffff"): Color of the card caption text. Usage: ```jsx import RotationSlider from "@/components/effects/rotation-slider"; export default function Page() { return ( <> ); } ``` Related: Helix Slider, Zoom Slider, Infinite Perspective Slider, Scroll Stack, Sticky Content Wrapper ### Scroll Distortion - Slug: `scroll-distortion` · Tier: Pro · Category: Scroll Effects - Install: `npx hyperiux add scroll-distortion` - Docs: https://vault.hyperiux.com/effects/scroll-effects/scroll-distortion · Live demo: https://vault.hyperiux.com/demo/scroll-distortion - Dependencies: gsap, three - Tags: GSAP, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). An experimental scroll effect that bends or warps selected visuals as users move between sections. Best used for: - Experimental brand pages where distortion is the transition language, not a readability tax. - Experimental brand pages where the transition between sections is the hook. - Gives experimental brand pages a memorable transition surface without pretending the distortion belongs on every route. Not for: Not for reading-heavy sections, product comparison, pricing, or any content where distortion would fight legibility. Not for pages with body copy visible during the distortion zone - legibility during motion is a WCAG concern. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Warping text, forms, or CTA zones instead of transition surfaces. - Letting sticky headers enter the distorted layer. - Using strong surface bending for visitors who prefer reduced motion. Props: - `distortionStrength` (number, default 0.8): Strength of the displacement distortion during transitions. - `rgbShift` (number, default 0.05): Amount of RGB channel separation during the distortion. - `distortionScale` (number, default 0.15): Scale of the fold and stretch distortion while transitioning. - `transitionDuration` (number, default 1.25): Duration of each image distortion transition. - `transitionEase` (string, default "power3.inOut"): GSAP ease used by each image distortion transition. - `sections` (object[], default [{"text":"SHADOW","src":"https://picsum.photos/seed/h02/1600/1200"},{"text":"FLOWER","src":"https://picsum.photos/seed/h03/1600/1200"},{"text":"RUN","src":"https://picsum.photos/seed/h05/1600/1200"}]): Slides as { text, src }: headline text and CORS-enabled image URL. - `displacementSrc` (string, default "https://picsum.photos/seed/distortionnoise/1600/1200"): Displacement map image URL; its red channel drives the transition warp. Usage: ```jsx import ScrollDistortion from '@/components/effects/scroll-distortion' const sections = [ { text:'SHADOW', src:'https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-07.jpg' }, { text:'FLOWER', src:'https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-10.jpg' }, { text:'RUN!!', src:'https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-02.jpg' }, ] const shaderConfig = { strength: 0.8, rgbShift: 0.05, scale: 0.15, transitionDuration: 0.8, transitionEase:'power3.inOut', } export default function page() { return ( <> ) } ``` Related: Scroll Stack, Interactive Blur Reveal, Mouse Pixelation, Split Canvas ### Scroll Shuffled Cards - Slug: `scroll-shuffled-cards` · Tier: Pro · Category: Scroll Effects - Install: `npx hyperiux add scroll-shuffled-cards` - Docs: https://vault.hyperiux.com/effects/scroll-effects/scroll-shuffled-cards · Live demo: https://vault.hyperiux.com/demo/scroll-shuffled-cards - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A scroll-triggered card shuffle effect that adds motion to equal-weight cards while keeping the source order stable. Best used for: - Equal-weight quote, tag, or gallery groups where motion can add freshness without changing priority. - Equal-weight tag, post, or gallery groups that benefit from kinetic energy. - Scroll Shuffled Cards creates a concrete scroll outcome that a static section would not deliver. Not for: Not for ordered steps, ranked proof, or content where sequence communicates priority. Not for cards with dependent order, legal meaning, or cumulative explanation. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Changing perceived priority when the cards are meant to stay equal. - Letting visual shuffle change keyboard or screen-reader order. - Leaving cards mid-shuffle after fast scroll. Props: - `background` (color, default "#FFFBEB"): Background color of the section. - `cardsGap` (number, default 6): Spacing between cards, in vw. - `sectionHeight` (number, default 400): Total scroll-track height (vh) - controls how much scrolling the shuffle takes. - `shuffleIntensity` (number, default 1): Multiplier on how far and how much each card drifts/rotates during the shuffle. Usage: ```jsx import ScrollShuffledCards from '@/components/effects/scroll-shuffled-cards' import { ReactLenis } from"lenis/react"; const page = () => { return ( <> ) } ``` Related: Scroll Stack, 3D Portfolio Slider, Parallax Gallery, Horizontal Feature Reveal ### Scroll Stack - Slug: `scroll-stack` · Tier: Pro · Category: Scroll Effects - Install: `npx hyperiux add scroll-stack` - Docs: https://vault.hyperiux.com/effects/scroll-effects/scroll-stack · Live demo: https://vault.hyperiux.com/demo/scroll-stack - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A pinned scroll animation that turns product tours, feature walkthroughs, and chaptered sections into a paced stacked sequence. Best used for: - SaaS feature tours where each chapter needs enough time for claim, proof, and next step. - SaaS feature tours and platform walkthroughs that need each chapter held long enough to read. - Converts passive feature scanning into an ordered product argument - each panel is the next step in a buying decision. Not for: Not for short landing pages, comparison tables, forms, or docs where people need to scan and act quickly. Not for routes where users frequently land mid-page from search - pinned chapters assume a top-to-bottom read order. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Using more than 6 panels without giving each a distinct claim - stacked chapters without distinct arguments feel like a carousel. - Keeping desktop pinning or horizontal movement on touch devices without a clean fallback. - Leaving pinned sections active in URL history, causing unexpected back-button behavior. Props: - `sectionBgColor` (color, default "#ffffff"): Background color of the section. - `cardRadius` (number, default 45): Corner rounding on each card, in px (desktop only - tablet/mobile keep their own responsive radius). Usage: ```jsx import { ReactLenis } from'lenis/react' import ScrollStack from '@/components/effects/scroll-stack' const page = () => { return ( <> ) } export default page ``` Related: Scroll Distortion, Parallax Gallery, Horizontal Feature Reveal, Sticky Content Wrapper ### Split Canvas - Slug: `split-canvas` · Tier: Free · Category: Scroll Effects - Install: `npx hyperiux add split-canvas` - Docs: https://vault.hyperiux.com/effects/scroll-effects/split-canvas · Live demo: https://vault.hyperiux.com/demo/split-canvas - Dependencies: gsap, lenis, three - Tags: GSAP, Lenis, Three.js - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A canvas-led scroll effect that splits or reveals visual states for before-after stories, AI launches, and transformation sections. Best used for: - Brand sections where the change between two visual states is the point of the scroll moment. - Before/after and state-change moments where the cut is the message. - Split Canvas creates a concrete scroll outcome that a static section would not deliver. Not for: Not for content where the before/after state is not obvious without motion. Not for pages where split motion would hide the CTA or interrupt reading. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Putting meaningful copy only inside a canvas layer. - Letting the seam hide the before/after comparison. - Using a split when there is no real two-state story. Props: - `bgColor` (color, default "#F5F5F0"): Page background color. - `gridSize` (number, default 16): Pixel-dissolve shader's grid cell size, in px. - `numSlices` (number, default 32): Number of horizontal slices the pixel-wipe transition is split into. - `canvasSize` (number, default 599): Size (px) of the central transitioning canvas panel on desktop - mobile/tablet sizes scale proportionally. Usage: ```jsx import SplitCanvas from '@/components/effects/split-canvas' const page = () => { return ( <> ) } ``` Related: Scroll Distortion, Interactive Blur Reveal, Dither Canvas, Mouse Pixelation ### Square Translate - Slug: `square-translate` · Tier: Pro · Category: Scroll Effects - Install: `npx hyperiux add square-translate` - Docs: https://vault.hyperiux.com/effects/scroll-effects/square-translate · Live demo: https://vault.hyperiux.com/demo/square-translate - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A geometric scroll animation that shifts square elements into place for clean technical sections and graphic brand layouts. Best used for: - Grid-led brand sections where square movement reinforces the visual system without hurting scan speed. - Minimal, technical sections that want a precise motion accent beside the copy. - Square Translate creates a concrete scroll outcome that a static section would not deliver. Not for: Not for dense grids, forms, or pages where geometric motion would slow comprehension. Not for grids where movement changes perceived grouping or reading order. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Letting translated squares cover text or controls. - Moving grid pieces so perceived reading order changes. - Using geometric motion without a clear brand or layout role. Props: - `translateValue` (number, default 55): Translate distance for the row currently aligned with the square. - `totalTranslateImpact` (number, default 3): How many neighboring rows ripple outward from the square. - `maxRotation` (number, default 360): Total rotation the square completes over the scroll track. - `transitionDuration` (number, default 0.4): Tween duration for the square and row movement on each scroll update. - `squareColor` (color, default "#FB450F"): Color of the translated square marker. - `squareSize` (number, default 12): Width and height of the square marker in pixels. Usage: ```jsx import SquareTranslate from "@/components/effects/square-translate"; const page = () => { return ( <> ); }; export default page; ``` Related: Scroll Stack, 3D Portfolio Slider, Parallax Gallery, Horizontal Feature Reveal ### Stack Spread - Slug: `stack-spread` · Tier: Free · Category: Scroll Effects - Install: `npx hyperiux add stack-spread` - Docs: https://vault.hyperiux.com/effects/scroll-effects/stack-spread · Live demo: https://vault.hyperiux.com/demo/stack-spread - Dependencies: motion - Tags: Motion - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A stack-to-spread hero component for portfolios, creative studios, product launches, campaign pages, and brand-led landing sections where imagery should move from compression into expression. Best used for: - Portfolio and studio hero sections where visual range matters. - Campaign pages that need a strong opening composition. - Product launch pages with multiple supporting visuals. - SaaS or AI landing pages that want image-led proof around a central claim. - Fashion, lifestyle, photography, editorial, and creative brand pages. - Visual archives, moodboards, and selected work sections where composition matters more than grid scanning. Not for: Not for dense galleries, ecommerce catalogues, pricing sections, documentation, comparison tables, forms, or content users need to scan quickly. Not for weak image sets. Stack Spread can arrange strong visuals beautifully, but it cannot create taste from random assets. Not for sections where the central message is long. The headline needs space, not a swarm of cards fighting for attention. Accessibility and mobile: Keep the central headline and supporting text as real DOM content. Give meaningful alt text to image cards when they communicate content. If the images are decorative atmosphere, mark them appropriately. On mobile, simplify the spread. Use fewer visible cards, reduce rotation, stack some visuals vertically, or switch to a calmer composition that preserves the central message. For reduced motion, show the final spread, a static stack, or a minimal fade without outward card travel. Performance budget: Keep the number of cards controlled, optimise images, reserve the final section dimensions, and animate transform and opacity rather than layout-heavy properties. Avoid excessive blur, large shadows, and constant recalculation during scroll or pointer movement. Do not render oversized images if the displayed cards are small. The component should feel light even when the composition feels rich. Common mistakes: - Letting cards cover the headline or CTA. - Using too many images. - Relying on random placement instead of composed spread positions. - Mixing image ratios without a cropping rule. - Making the initial stack so dense that the visuals are unreadable. - Forcing the full desktop spread onto mobile. - Using the effect as decoration when the image set has no relationship to the message. Props: - `scrollLength` (number, default 350): Total scroll distance the spread plays out over, in vh. Sets the section height. - `clusterRotation` (boolean, default true): Fan the clustered stack with each card's own angle, or start every card flat. - `stackScale` (number, default 0.82): Scale of the cards while clustered, before they spread out to full size. - `cardRadius` (number, default 8): Corner radius on each card, in px (desktop only - tablet/mobile keep their responsive radius). - `bgColor` (color, default "#ececeb"): Background color of the section behind the cards. - `textColor` (color, default "#141414"): Color of the centre headline and subtitle. - `textFadeStart` (number, default 0.3): Scroll progress (0-1) where the centre text starts fading in. Usage: ```jsx import StackSpread from "@/components/effects/stack-spread"; export default function page() { return ( <> ); } ``` Related: Information Drawer, Timeline, Cards Runway, Hover Stack ### Stacking Cards - Slug: `stacking-cards` · Tier: Pro · Category: Scroll Effects - Install: `npx hyperiux add stacking-cards` - Docs: https://vault.hyperiux.com/effects/scroll-effects/stacking-cards · Live demo: https://vault.hyperiux.com/demo/stacking-cards - Dependencies: gsap, lenis - Tags: GSAP, Lenis - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A scroll-based card stack effect where each card accumulates visually as the next item enters the section. Best used for: - Process, proof, and principle sections where each item should accumulate visual weight. - Milestone, principle, or proof sequences where impressions should accumulate. - Lets process steps or proof points accumulate, making the sequence feel heavier with every card. Not for: Not for comparison grids, forms, or pages where accumulated cards would obscure the next action. Not for card groups where hidden depth would make keyboard focus or link order confusing. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Stacking more cards than can remain legible. - Letting overlap hide keyboard focus or link targets. - Using accumulation for unrelated cards that do not build an argument. Props: - `imageZoomEnabled` (boolean, default true): Enables the image zoom-in effect during card reveals. - `tiltEnabled` (boolean, default true): Enables the outgoing card tilt, scale, and rotateX treatment. - `cardCornerRadius` (number, default 48): Corner radius in pixels applied to the cards as they stack (not the images). - `stackPerspective` (number, default 1200): Perspective depth for the tilt. Only applies while tilt is enabled. Usage: ```jsx import StackingCards from '@/components/effects/stacking-cards' import { ReactLenis } from'lenis/react' const page = () => { return ( <> ) } ``` Related: Scroll Stack, 3D Portfolio Slider, Parallax Gallery, Horizontal Feature Reveal ### Sticky Content Wrapper - Slug: `sticky-content-wrapper` · Tier: Free · Category: Scroll Effects - Install: `npx hyperiux add sticky-content-wrapper` - Docs: https://vault.hyperiux.com/effects/scroll-effects/sticky-content-wrapper · Live demo: https://vault.hyperiux.com/demo/sticky-content-wrapper - Dependencies: gsap, lenis - Tags: GSAP, Lenis - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A sticky scroll layout that keeps one core claim fixed while supporting proof, visuals, or steps move beside it. Best used for: - Product stories where one central claim should stay anchored while proof changes beside it. - Product pages where one claim stays anchored while proof scrolls past it. - Keeps the core claim visible while proof changes around it, so product tours feel focused instead of scattered. Not for: Not for sections where every item has equal weight or users need to jump straight to a specific answer. Not for mobile layouts unless the pinned idea becomes a clean vertical sequence. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Making the sticky claim too long to read while evidence moves. - Letting the sticky column overlap its proof on short viewports. - Pairing unrelated evidence with the anchored message. Props: - `bgColor` (color, default "#ffffff"): Background color of the sticky section, including the gap between the content and image panes. - `textColor` (color, default "#000000"): Color of the text content and the scroll indicator. - `contentEnterYPercent` (number, default 2): Vertical offset (% of content height) each content block starts from before sliding into place. - `initialImageScale` (number, default 1.5): Scale of an image before it becomes the active image. - `activeImageScale` (number, default 1.2): Scale of the image while it is active on screen. - `exitImageScale` (number, default 1): Scale of an image after it has exited. Usage: ```jsx import StickyContentWrapper from "@/components/effects/sticky-content-wrapper"; import { ReactLenis } from"lenis/react"; export default function Page() { return ( ); } ``` Related: Scroll Stack, Stacking Cards, Horizontal Feature Reveal, Hover Stack, Zoom Slider ### SVG Path Marquee - Slug: `svg-path` · Tier: Pro · Category: Scroll Effects - Install: `npx hyperiux add svg-path` - Docs: https://vault.hyperiux.com/effects/scroll-effects/svg-path · Live demo: https://vault.hyperiux.com/demo/svg-path - Dependencies: motion - Tags: Motion - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A scroll-linked SVG text marquee that moves copy along a custom path for campaign signatures, editorial loops, and typographic brand moments. Best used for: - Editorial or brand strips where text motion should follow a drawn path without hiding the message. - Brand statements that trace a product outline, logo, or custom path. - Makes brand language travel along a designed path, turning a line of copy into a motion signature. Not for: Not for long text, accessibility-critical messages, or sections where motion makes reading harder. Not for keyword-critical headings or important sentences that need stable layout. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Using tight SVG curves that make text unreadable. - Making a moving path carry keyword-critical copy. - Forgetting a static readable path state for reduced motion. Props: - `bgColor` (color, default "#000000"): Background color of the section. - `baseVelocity` (number, default 8): Marquee scroll speed along the path. - `dragSensitivity` (number, default 0.1): How much drag movement translates to velocity. - `slowDownFactor` (number, default 0.3): How much the marquee slows down while hovered. - `draggable` (boolean, default true): Enables drag interaction on the marquee. Usage: ```jsx import SVGPath from "@/components/effects/svg-path"; const page = () => { return ( <> ); }; export default page; ``` Related: Scroll Stack, 3D Portfolio Slider, Parallax Gallery, Horizontal Feature Reveal ### SVG Pixel Reveal - Slug: `svg-pixel-reveal` · Tier: Pro · Category: Scroll Effects - Install: `npx hyperiux add svg-pixel-reveal` - Docs: https://vault.hyperiux.com/effects/scroll-effects/svg-pixel-reveal · Live demo: https://vault.hyperiux.com/demo/svg-pixel-reveal - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A scroll-linked SVG reveal effect that resolves logos, diagrams, or vector graphics through a pixel-style mask. Best used for: - Technical reveals for logos, interface shots, or diagrams that should resolve with digital intent. - Technical pages revealing a logo, diagram, or line drawing with intent. - SVG Pixel Reveal creates a concrete scroll outcome that a static section would not deliver. Not for: Not for essential diagrams, legal copy, or hero content that must be readable before animation completes. Not for assets that carry essential meaning before the reveal has finished. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Using a pixel reveal for essential diagrams that must be read instantly. - Letting the mask fail to reach the completed artwork on fast scroll. - Forgetting accessible title, description, or adjacent explanatory copy. Props: - `intensity` (number, default 22): Starting pixelation intensity before the reveal sharpens the image. - `scrub` (boolean, default true): Tie the reveal to scroll position. When off, the reveal plays once when the image enters the viewport. - `duration` (number, default 1.5): Reveal duration in seconds when scrub is off. - `src` (string, default "https://picsum.photos/seed/v01/1600/1200"): Image URL to pixelate and reveal. - `alt` (string, default "Image"): Alt text for the revealed image. Usage: ```jsx import SVGPixelReveal from "@/components/effects/svg-pixel-reveal"; export default function Page() { return ( <>
); } ``` Related: Scroll Stack, 3D Portfolio Slider, Parallax Gallery, Horizontal Feature Reveal ### Text Convergence - Slug: `text-convergence` · Tier: Free · Category: Scroll Effects - Install: `npx hyperiux add text-convergence` - Docs: https://vault.hyperiux.com/effects/scroll-effects/text-convergence · Live demo: https://vault.hyperiux.com/demo/text-convergence - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A scroll text animation that brings scattered words or phrases together into one resolved statement. Best used for: - Taglines or launch claims that become stronger when fragmented words visibly assemble. - Single high-impact taglines that land harder by visibly assembling. - Text Convergence creates a concrete scroll outcome that a static section would not deliver. Not for: Not for body copy, instructions, or claims that must be clear before the animation resolves. Not for phrases that need to be understood instantly above the fold. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Splitting the accessible phrase into fragments for screen readers. - Letting moving words cause horizontal overflow. - Using convergence on claims that need instant comprehension. Props: - `bgColor` (color, default "#111111"): Background color of the section. - `text` (string, default "Build faster. Animate better. Ship smarter. Hyperiux Vault gives you the tools to create high-performance interfaces that look premium and feel effortless."): Headline text; word count also sets the scroll section height. Usage: ```jsx import TextConvergence from '@/components/effects/text-convergence' const page = () => { return ( <> ) } export default page ``` Related: Interactive Blur Reveal, Sticky Content Wrapper, Text Stream, Video Player, WebGL Slider ## Creative Components (20) ### Animated FAQ - Slug: `animated-faq` · Tier: Free · Category: Creative Components - Install: `npx hyperiux add animated-faq` - Docs: https://vault.hyperiux.com/effects/components/animated-faq · Live demo: https://vault.hyperiux.com/demo/animated-faq - Dependencies: gsap, lucide-react - Tags: GSAP, Lucide - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A button-controlled FAQ accordion for pricing pages, product objections, landing pages, and conversion-focused answer sections. Best used for: - Pricing pages where objections need to open beside the CTA. - Product landing pages where answers should stay crawlable but not dominate the first screen. - Sales pages where accordion state should be clear for keyboard and screen-reader users. Not for: Not for hiding essential policy, pricing, support, or legal details that users must see without opening an accordion. Accessibility and mobile: Each question needs a real button with aria-expanded and a connected answer panel. On mobile, keep tap targets generous and make open/closed state visually obvious. Performance budget: Keep answer panels light, avoid layout-heavy height animation across many open items, and render answer copy as normal HTML so search and no-JS paths still see it. Common mistakes: - Animating an accordion before the button and aria-expanded state are correct. - Hiding the only useful answer inside client-only state. - Letting reduced-motion users wait for height animation. Props: - `allowMultiple` (boolean, default false): Lets more than one FAQ answer stay open at once. - `duration` (number, default 0.5): Open and close animation duration. - `showIcon` (boolean, default true): Shows or hides the FAQ trigger icon. - `iconPosition` (string, default "right"): Side where the trigger icon is rendered. - `iconMode` (string, default "rotate"): Chevron rotation style used by the trigger icon. Usage: ```jsx import { FAQContent, FAQGroup, FAQTitle, FAQWrapper, } from "@/components/effects/animated-faq"; export default function FAQDemo() { const defaultOpenItems = faqItems .filter((item) => item.defaultOpen) .map((item) => item.id); return ( <>
{/* Heading */}

Animated Faq

{/* Subtext */}

Click on the FAQ triggers

{faqItems.map((item) => ( {item.title} {item.content} ))}
); } const faqItems = [ { id: "faq-1", title: "What makes this FAQ package more reusable?", content: ( <> You are no longer locked into a plain data object. You can pass rich JSX, custom markup, inline links, badges, icons, or even other components inside the title and content. ), defaultOpen: true, }, { id: "faq-2", title: "Can I put custom content inside the answer?", content: (

Yes. This content area accepts full React nodes, not just text.

  • Paragraphs
  • Lists
  • Buttons
  • Inline links
), defaultOpen: false, }, { id: "faq-3", title: "Does it use the ChevronBird trigger?", content: ( <> Yes. The open and close state is visually driven by ChevronBird, so your motion language stays consistent across the whole system. ), defaultOpen: false, }, ]; ``` Related: File Encryption, Animated Toggle, Gooey Counter ### Animated Form - Slug: `animated-form` · Tier: Pro · Category: Creative Components - Install: `npx hyperiux add animated-form` - Docs: https://vault.hyperiux.com/effects/components/animated-form · Live demo: https://vault.hyperiux.com/demo/animated-form - Dependencies: zod - Tags: zod - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). An interactive form component with clear animated states for labels, validation, errors, submit progress, and success feedback. Best used for: - Lead-capture forms that need validation clarity and visible submit state. - Demo request and waitlist flows where errors must be easy to recover from. - Product pages where the form is the conversion point, not a design flourish. Not for: Not for flows where animation delays typing, validation, error discovery, payment, or submit feedback. Accessibility and mobile: Every field needs a label or accessible name, errors need field association, and submit state should be perceivable without relying on colour alone. On mobile, keep inputs large and keyboard-friendly. Performance budget: Keep typing independent from decorative motion, debounce expensive validation, and avoid re-rendering the full form on every keystroke. Common mistakes: - Animating labels until the accessible name becomes unclear. - Showing errors visually without tying them to fields. - Making users wait for decoration before the form accepts input. Props: - `backgroundColor` (color, default "#ffffff"): Page background color around the form. - `textColor` (color, default "#111111"): Text color for the form heading and field labels. - `inputBackgroundColor` (color, default "#ffffff"): Background color for inputs, textarea, and select controls. - `fieldBorderColor` (color, default "#e5e7eb"): Default border color for form controls. - `inputRoundedness` (number, default 28): Border radius for inputs and the submit button in pixels. - `duration` (number, default 0.3): Transition duration for control focus and button effects in seconds. Usage: ```jsx import AnimatedForm from '@/components/effects/animated-form'; const page = () => { return ( <> ) } ``` Related: Arrow Fill Button, Animated Toggle, Animated FAQ, Card Drift ### Animated Modal - Slug: `animated-modal` · Tier: Pro · Category: Creative Components - Install: `npx hyperiux add animated-modal` - Docs: https://vault.hyperiux.com/effects/components/animated-modal · Live demo: https://vault.hyperiux.com/demo/animated-modal - Dependencies: lucide-react - Tags: Lucide - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A focus-managed dialog component for confirmations, demo previews, compact forms, media lightboxes, and contextual help. Best used for: - Short dialogs where temporary focus helps the task. - Demo previews, confirmation steps, compact forms, and media lightboxes with clear close behavior. - Desktop interactions that can become drawers or inline sections on mobile. Not for: Not for long pages, dense forms, core pricing details, or content that would work better as an inline section or drawer. Accessibility and mobile: Label the dialog, trap focus only while open, close with Escape when safe, and restore focus to the trigger. On mobile, use a drawer or inline section when the content is long. Performance budget: Mount heavy modal content only when needed, keep open/close transitions short, and avoid blocking route or scroll restoration after close. Common mistakes: - Opening a modal without a clear title or accessible label. - Failing to return focus to the trigger. - Putting long task flows inside a cramped dialog. Props: - `showCloseButton` (boolean, default true): Shows the close (X) button. - `closeOnBackdrop` (boolean, default true): Closes the modal when the backdrop is clicked. - `closeOnEsc` (boolean, default true): Closes the modal when Escape is pressed. - `size` (number, default 72): Modal content width as a percentage of the viewport, capped at 960px. - `overlayOpacity` (number, default 0.82): Opacity of the page overlay. - `duration` (number, default 0.5): Open and close fade duration in seconds. - `backgroundColor` (color, default "#ffffff"): Modal content background color. - `textColor` (color, default "#111111"): Modal content text color. - `roundedness` (number, default 24): Modal content border radius in pixels. Usage: ```jsx import AnimatedModal from "@/components/effects/animated-modal"; export default function Page() { return ( <> ); } ``` Related: Arrow Fill Button, Animated Toggle, Animated FAQ, Animated Form ### Animated Tabs - Slug: `animated-tabs` · Tier: Pro · Category: Creative Components - Install: `npx hyperiux add animated-tabs` - Docs: https://vault.hyperiux.com/effects/components/animated-tabs · Live demo: https://vault.hyperiux.com/demo/animated-tabs - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A keyboard-friendly animated tabs component for organizing dense product content, use cases, integrations, and equal-weight panels. Best used for: - Product sections where dense information needs clear grouping. - Integration, pricing-detail, or use-case sections where each panel has equal weight. - Pages where keyboard navigation and selected state are part of trust. Not for: Not for content that must be compared side by side, discovered through search snippets, or read in one continuous flow. Accessibility and mobile: Expose tablist, tab, selected state, and tabpanel relationships where appropriate. On mobile, switch to stacked sections when horizontal tabs become cramped. Performance budget: Avoid remounting heavy panels on every tab change unless necessary, pre-size panel space where possible, and keep transitions short. Common mistakes: - Using tabs for unrelated content. - Hiding important SEO copy in client-only inactive panels. - Skipping keyboard movement between tabs. Props: - `defaultActiveIndex` (number, default 0): Index of the initially active tab. - `animationType` (string, default "slide"): Panel transition style. - `slideDistance` (number, default 40): Horizontal travel distance for the slide transition, in pixels. - `accentColor` (color, default "#ff6b00"): Color used for the active tab label and indicator. - `duration` (number, default 0.35): Panel and indicator transition duration in seconds. Usage: ```jsx import AnimatedTabs from '@/components/effects/animated-tabs'; const Page = () => { return ( <> ) } ``` Related: Animated FAQ, Animated Toggle, Animated Form, Arrow Fill Button ### Border Beam - Slug: `border-beam` · Tier: Free · Category: Creative Components - Install: `npx hyperiux add border-beam` - Docs: https://vault.hyperiux.com/effects/components/border-beam · Live demo: https://vault.hyperiux.com/demo/border-beam - Dependencies: lucide-react - Tags: Lucide, CSS - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). Add a moving beam of light around cards, forms, CTAs, and feature panels to guide attention without changing the component’s real structure. Best used for: - Pricing cards, featured plans, and upgrade prompts where one option needs controlled emphasis. - Login, waitlist, and demo-request panels where the container should feel active without hurting form usability. - Product feature cards, proof blocks, and CTAs where the border can guide attention without changing layout. Not for: Not for dense card grids, long reading sections, dashboards, tables, destructive actions, or any UI where every container competes for attention. Not for forms where the animated border distracts from labels, errors, validation, or submit state. Accessibility and mobile: The beam is decorative. Keep it hidden from assistive technology, preserve visible focus states, and make sure the border animation never becomes the only selected, error, or active-state indicator. On mobile and reduced motion, use a static border, subtle highlight, or no beam. Performance budget: Animate the beam with compositor-friendly transforms where possible, avoid layout-triggering border changes, keep glow blur restrained, and do not run dozens of beams at once. Pause or simplify decorative border motion when the section is offscreen. Common mistakes: - Adding Border Beam to every card on the page. - Letting the glow reduce text contrast or obscure form fields. - Using the beam as the only way to show selection, focus, error, or loading state. - Making the border animation louder than the actual CTA. Props: - `size` (string, default "md"): Chooses the beam motion family and sizing preset. - `colorVariant` (string, default "colorful"): Chooses the color palette used by the beam. - `theme` (string, default "auto"): Sets the light, dark, or system-aware beam tuning. - `active` (boolean, default true): Turns the beam animation on or off. - `strength` (number, default 2): Scales the beam intensity. - `duration` (number, default 3.3): Time for the beam to complete a loop. - `beamWidth` (number, default 9): Thickness of the animated border beam. - `backgroundColor` (color, default "#212121"): Card or container background color. Usage: ```jsx import BorderBeam from '@/components/effects/border-beam' export default function Page() { return ( <>
) } ``` Related: Card Drift, Animated Form, Animated Modal, Inertia Image, Magnetic Image Trail ### Card Drift - Slug: `card-drift` · Tier: Pro · Category: Creative Components - Install: `npx hyperiux add card-drift` - Docs: https://vault.hyperiux.com/effects/components/card-drift · Live demo: https://vault.hyperiux.com/demo/card-drift - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A subtle card-motion component that adds slow independent drift to proof grids, feature rows, logo walls, and portfolio tiles. Best used for: - Proof and testimonial grids where gentle motion makes a static section feel intentional. - Feature or logo rows that would otherwise sit flat, where drift adds life without hiding content. - Portfolio and case-study tiles where subtle independent movement signals craft on the first screen. Not for: Not for pricing, comparison, or dense reading sections where cards need to stay perfectly still for scanning. Accessibility and mobile: Do not move focused cards unpredictably. On mobile and reduced motion, freeze the cards or use a static grid. Performance budget: Keep drift slow and low-amplitude, pause offscreen, animate transform only, and avoid per-card effects that repaint the full grid. Common mistakes: - Letting decorative drift pull attention away from the proof copy. - Animating cards while a keyboard user is focused inside them. - Using drift to compensate for weak card content. Props: - `backgroundColor` (color, default "#000000"): Background color for the draggable card field. - `backgroundTextColor` (color, default "#ffffff"): Color of the large background label. - `cardColor` (color, default "#4f46e5"): Background color for each draggable card. - `cardTextColor` (color, default "#ffffff"): Text color for each draggable card. - `barColor` (color, default "#262626"): Background color for each card's tag bar. - `driftAmount` (number, default 30): Initial scatter and drag throw distance for cards. - `smoothness` (number, default 0.7): Release and scale smoothing duration for each dragged card. Usage: ```jsx import CardDrift from '@/components/effects/card-drift' const page = () => { return ( <>
Grab any card and move it around
) } export default page ``` Related: Helix Slider, Circular Split Roll, Text Convergence, Scramble Link Button ### Draggable Marquee - Slug: `draggable-marquee` · Tier: Pro · Category: Creative Components - Install: `npx hyperiux add draggable-marquee` - Docs: https://vault.hyperiux.com/effects/components/draggable-marquee · Live demo: https://vault.hyperiux.com/demo/draggable-marquee - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A moving marquee strip that users can drag, pause, and explore for logos, proof points, tags, awards, or visual content. Best used for: - Logo, award, partner, or tech-stack strips where visitors may want to pause and inspect the stream. - Logo, tech-stack, and award strips that should drift but also invite a flick. - Draggable Marquee creates a concrete scroll outcome that a static section would not deliver. Not for: Not for mandatory proof, compliance logos, or content users must read in sequence. Not for logo strips where motion prevents recognition, trust, or partner scanning. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Letting horizontal drag fight native vertical scrolling. - Using motion for logos that must be recognized quickly. - Making the marquee the only way to access important proof. Props: - `speed` (number, default 7.2): Autoplay movement speed (px per tick). - `pauseOnHover` (boolean, default false): Pauses autoplay while hovered. - `throwMultiplier` (number, default 2.8): Drag-release momentum strength. - `throwFriction` (number, default 0.975): Momentum decay rate per frame after a drag release - closer to 1 coasts longer. Usage: ```jsx import DraggableMarquee from "@/components/effects/draggable-marquee"; const page = () => { return ( <> ); }; export default page; ``` Related: Pixelated Image Effect, Helix Slider, Rectangular Text Reveal, Chess Grid Transition, Rope Cursor ### Elastic Accordion - Slug: `elastic-accordion` · Tier: Pro · Category: Creative Components - Install: `npx hyperiux add elastic-accordion` - Docs: https://vault.hyperiux.com/effects/components/elastic-accordion · Live demo: https://vault.hyperiux.com/demo/elastic-accordion - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A button-controlled accordion component for FAQ sections, pricing objections, feature explanations, product proof, service pages, and help content where answers should expand cleanly without feeling stiff. Best used for: - Pricing FAQs and purchase objections. - Product pages where technical questions need compact answers. - Service pages where buyers need detail without losing the main narrative. - Comparison pages where objections and fit questions matter. - Documentation summaries, onboarding guidance, and support content. - Conversion sections where answers should stay close to the CTA. Not for: Not for hiding essential information users must see before acting. Not for long documentation, legal clauses, dense tables, product specs, or content that needs side-by-side comparison. Not for pages where every section becomes an accordion because the layout has not made a decision. Collapsing everything is not information architecture. It is avoidance with rounded corners. Accessibility and mobile: Use button triggers, visible focus states, keyboard support, and correct expanded state. Keep the answer text in a logical reading order and ensure icons are decorative unless they communicate meaningful state. On mobile, make rows easy to tap, keep answer width comfortable, and avoid tiny icons. For reduced motion, remove bounce, stretch, spring overshoot, and long panel travel. The answer should simply open. Performance budget: Keep the accordion lightweight. Avoid measuring every panel repeatedly, avoid animating layout-heavy properties across many open items, and clean up resize listeners when used. For long FAQ sets, consider grouping, search, or pagination instead of rendering a massive animated stack. Animate height, opacity, and transform with restraint. Elastic movement should feel responsive, not slow. Common mistakes: - Using clickable divs instead of buttons. - Hiding important conversion information inside collapsed panels. - Writing answers that are too long. - Making the elastic motion too bouncy. - Forgetting keyboard and focus states. - Breaking FAQ schema by marking up hidden or mismatched content. - Letting panel height animation cause layout jank. Props: - `duration` (number, default 0.8): Expansion animation duration in seconds. - `gooeyStrength` (number, default 9): Strength of the gooey connection between question and answer. - `stagger` (number, default 0.05): Delay between answer line reveals in seconds. - `multiple` (boolean, default false): Allows multiple answers to remain open. - `startOpen` (number, default 0): Initially open item index; -1 closes all items. - `bgColor` (color, default "#ebebe9"): Background color. - `panelColor` (color, default "#101010"): Question and answer panel color. - `textColor` (color, default "#fffaf2"): Text and icon color; secondary elements use reduced opacity. - `ease` (string, default "elastic.out(1,0.82)"): GSAP easing for expansion. Available in code only. - `items` (ElasticAccordionItem[]): Question and answer items; defaults to the built-in FAQ. - `className` (string, default ""): Additional root class names. - `onChange` ((index: number, isOpen: boolean) => void): Called when an item is toggled. Usage: ```jsx import ElasticAccordion from '@/components/effects/elastic-accordion' const page = () => { return ( <> ) } ``` Related: Animated FAQ, Animated Tabs, Gooey Counter, Information Drawer ### Globe - Slug: `globe` · Tier: Pro · Category: Creative Components - Install: `npx hyperiux add globe` - Docs: https://vault.hyperiux.com/effects/components/globe · Live demo: https://vault.hyperiux.com/demo/globe - Dependencies: gsap, lucide-react - Tags: GSAP, Lucide - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). An interactive map-and-globe component for SaaS, fintech, logistics, travel, infrastructure, AI, cybersecurity, and global product pages where location data should feel spatial, connected, and alive. Best used for: - Global SaaS, fintech, infrastructure, logistics, travel, and cybersecurity products. - Office, team, customer, or partner location sections. - Route maps, network diagrams, data-flow visuals, and regional coverage pages. - Launch pages showing market expansion or international availability. - Investor, enterprise, or trust pages where operational reach matters. - Community and event pages where geographic spread is part of the proof. Not for: Not for pages where geography is not meaningful. Not for fake global presence. If the business only operates in one region, use a local map, market section, or customer story instead of pretending the world needs to rotate. Not for dense operational dashboards, legal coverage lists, compliance matrices, or anything users need to scan with precision. Use tables when exact regional rules matter. Accessibility and mobile: Provide a readable text alternative for meaningful location data. A visual globe should not be the only way to access supported cities, regions, offices, or routes. Use accessible controls for view toggles, selected locations, and route interactions. Preserve keyboard access where the component is interactive. On mobile, simplify the layout, reduce label density, shorten animations, and consider a flat map or stacked location list when the globe becomes too cramped. For reduced motion, pause continuous rotation, remove route drawing, disable camera travel, and show a stable map or static globe state with readable location information. Performance budget: Keep location count controlled, optimise route rendering, and avoid excessive label animation. If the component uses Canvas or WebGL, cap device pixel ratio, clean up animation loops, and pause motion when the component is outside the viewport. Do not animate every marker, label, line, and globe rotation at full intensity at the same time. Global reach should feel impressive without making the browser feel like it has been asked to run air traffic control. Common mistakes: - Showing too many labels at once. - Using route lines with no real meaning. - Making the globe decorative while hiding important location information. - Forgetting a mobile-friendly fallback. - Running continuous animation when the section is offscreen. - Using vague labels like “Global” without specific locations. - Making map controls look polished but unclear. - Treating geography as proof when the data does not support it. Props: - `autoConnect` (boolean, default false): Periodically animates a route between two random locations. - `autoRotate` (boolean, default true): Continuously rotates the globe when it is idle. - `rotationSpeed` (number, default 4): Automatic globe rotation speed in degrees per second. - `routeFrequency` (number, default 3.5): Delay in seconds between automatic route animations. - `routeDuration` (number, default 1.4): Duration of each animated route in seconds. - `connections` (number, default 3): Number of nearby routes emitted after selecting a location. - `dotDensity` (number, default 11000): Number of sphere samples used to build the dotted land field. - `dotSize` (number, default 2.3): Rendered diameter of each land dot in pixels. - `markerSize` (number, default 5): Rendered diameter of each location marker in pixels. - `routeColor` (color, default "#fffaf2"): Color of animated connection routes. - `mapColor` (color, default "#ffffff"): Color of the dotted land field. - `markerColor` (color, default "#fffaf2"): Color of location markers and the globe outline. - `showLabels` (boolean, default true): Shows location labels around the globe. - `enableDrag` (boolean, default true): Allows pointer dragging to rotate the globe. - `morphDuration` (number, default 0.6): Duration of the globe-to-map projection transition in seconds. Usage: ```jsx import Globe from "@/components/effects/globe"; export default function page() { return ( <> ); } ``` Related: Timeline, Milky Way ### Gooey Counter - Slug: `gooey-counter` · Tier: Free · Category: Creative Components - Install: `npx hyperiux add gooey-counter` - Docs: https://vault.hyperiux.com/effects/components/gooey-counter · Live demo: https://vault.hyperiux.com/demo/gooey-counter - Dependencies: none beyond React - Tags: Canvas - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A liquid-style metric counter that gives proof numbers expressive motion while keeping final values readable. Best used for: - Metric sections where a small number of proof points can carry an expressive number treatment. - Launch pages where the motion adds brand texture without making the figure hard to read. - Metric bands where brand motion can make proof feel owned without reducing legibility. Not for: Not for financial, compliance, analytics, or dashboard numbers where exact reading speed matters more than expressive motion. Accessibility and mobile: Expose the final number once in readable text. On mobile and reduced motion, show the settled metric without gooey transitions. Performance budget: Limit the number of animated counters, avoid expensive filters over large text, and stop the animation after the value has resolved. Common mistakes: - Animating every statistic on the page. - Making the number hard to read while it matters. - Looping proof metrics after users already understood them. Props: - `maxValue` (number, default 100): Upper bound of the looping 0..maxValue count sequence. - `gridSize` (number, default 22): Number of grid columns used by the morphing counter. - `duration` (number, default 1): Pace multiplier for the count/morph animation (1 = default speed). - `roundedness` (number, default 0): Corner rounding for each gooey grid cell. - `blobColor` (color, default "#111111"): Color of the gooey animated blocks. - `backgroundColor` (color, default "#d1d1d1"): Background color behind the counter. Usage: ```jsx import GooeyCounter from '@/components/effects/gooey-counter' const page = () => { return ( <> ) } export default page ``` Related: Hover Slider, Animated FAQ, Depth Card Stack ### GSAP Flip Card - Slug: `gsap-flip-card` · Tier: Free · Category: Creative Components - Install: `npx hyperiux add gsap-flip-card` - Docs: https://vault.hyperiux.com/effects/components/gsap-flip-card · Live demo: https://vault.hyperiux.com/demo/gsap-flip-card - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A thumbnail-to-preview card component for portfolios, product galleries, case-study visuals, travel stories, editorial pages, and image-led interfaces where the selected card should feel physically connected to its new position. Best used for: - Portfolio image galleries where selected work needs a larger preview. - Product galleries where thumbnails should expand into focus. - Travel, photography, fashion, and editorial image sets. - Case-study sections where visual selection should feel connected. - Visual archives where browsing benefits from thumbnail-to-preview continuity. - Landing pages where one selected image should carry the section. Not for: Not for dense ecommerce grids, pricing sections, documentation, long text cards, legal content, or interfaces where users need instant comparison across many items. Not for unstable layouts where images, captions, or containers constantly change size. FLIP rewards discipline. It punishes chaos with visible weirdness. Not for content where a simple grid would be faster, clearer, and more useful. Accessibility and mobile: Use semantic buttons for thumbnails, meaningful image alt text, visible focus states, and clear selected state. When a card becomes the preview, preserve a logical reading order and avoid moving focus unexpectedly unless the interaction requires it. On mobile, simplify the layout into a stacked preview with a horizontal thumbnail rail or swipe-friendly sequence. For reduced motion, switch selected images instantly or with a minimal fade, without FLIP travel, scaling, or layout-flight animation. Performance budget: Optimise image sizes, keep card count controlled, and avoid triggering layout measurement across a huge DOM subtree. FLIP works by measuring layout states, so keep the animated scope tight. Avoid running expensive animations on every hover. Use click or deliberate selection where possible. Clean up GSAP timelines and contexts on unmount. On lower-power devices, reduce shadow intensity, animation duration, and simultaneous card movement. Common mistakes: - Forgetting to register the GSAP Flip plugin. - Measuring layout after the state has already changed incorrectly. - Using inconsistent image ratios that make the movement feel broken. - Animating too many cards at once. - Making thumbnails clickable without keyboard support. - Hiding captions inside images. - Using FLIP when a normal image swap would be clearer. Props: - `duration` (number, default 0.7): Card transition duration in seconds. - `rounded` (number, default 20): Card corner radius in pixels. - `stackOffsetX` (number, default 3): Horizontal offset per card in the collapsed desktop stack. - `stackOffsetY` (number, default 9): Vertical offset per card in the collapsed desktop stack. - `stackRotation` (number, default 0): Rotation per card in the collapsed desktop stack, in degrees. - `thumbGap` (number, default 12): Spacing between desktop rail thumbnails in pixels. - `backgroundColor` (color, default "#e9e9e7"): Section background color. - `textColor` (color, default "#111111"): Primary text color. - `mutedColor` (color, default "#8a8a86"): Secondary text color. - `ease` (string, default "power3.inOut"): GSAP transition easing. - `showCounter` (boolean, default true): Shows the image counter. - `thumbWidth` (number, default 108): Code-only configuration for thumbWidth. - `thumbHeight` (number, default 120): Code-only configuration for thumbHeight. - `heroWidth` (number, default 530): Code-only configuration for heroWidth. - `heroHeight` (number, default 670): Code-only configuration for heroHeight. - `captionLines` (number, default 2): Code-only configuration for captionLines. - `captionFadeDuration` (number, default 0.25): Fade-out duration in seconds for all text sections. - `captionRevealDuration` (number, default 0.55): Line-reveal duration in seconds for all text sections. - `captionLineStagger` (number, default 0.07): Stagger between revealed lines across all text sections in seconds. - `title` (string, default "GSAP Flip Card"): Fallback title for items without a title. - `meta` (string, default "Hyperiux Vault / GSAP Flip / React"): Fallback metadata for items without metadata. - `description` (string, default "A pile of cards that fans into a hero and a rail. Tap any frame and the two trade places, same nodes, measured and tweened, never re-mounted."): Fallback description for items without a description. - `className` (string, default ""): Code-only className. - `items` (GsapFlipCardItem[]): Gallery images with optional IDs, alt text, titles, metadata, descriptions and captions; defaults to the built-in gallery. - `onClose` (() => void): Called when the gallery closes. Usage: ```jsx import GsapFlipCard from '@/components/effects/gsap-flip-card' const page = () => { return ( <> ) } ``` Related: Information Drawer, Hover Stack, Depth Card Stack, Interactive List Preview ### Hover Stack - Slug: `hover-stack` · Tier: Free · Category: Creative Components - Install: `npx hyperiux add hover-stack` - Docs: https://vault.hyperiux.com/effects/components/hover-stack · Live demo: https://vault.hyperiux.com/demo/hover-stack - Dependencies: none beyond React - Tags: Vanilla JS - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A card interaction component where hover or focus adds shallow depth to service, proof, and feature card groups. Best used for: - Service and proof-card groups where depth on hover makes exploration feel crafted. - Desktop sections that still work as a normal stack of cards on touch devices. - Card groups where hover depth adds craft while the non-hover state remains complete. Not for: Not for mobile-first sections, dense comparison cards, or content where hover depth hides information users need to compare. Accessibility and mobile: Mirror hover states with focus states, keep links reachable in order, and flatten the stack into normal cards on coarse pointers. Performance budget: Animate transform and shadow with restraint, keep layers small, and avoid large blur or filter effects on the whole card group. Common mistakes: - Letting hover depth cover neighbouring card links. - Forgetting focus-visible states. - Using hover to reveal required copy. Props: - `cardWidth` (number, default 280): Width of each card in pixels. - `cardHeight` (number, default 360): Height of each card in pixels. - `overlap` (number, default 96): Horizontal overlap between resting cards in pixels. - `pushDistance` (number, default 235): Distance neighboring cards are pushed aside on hover. - `hoverLift` (number, default 30): Vertical lift applied to the hovered card in pixels. - `spread` (number, default 24): Distance cards spread while hovered. - `rotation` (number, default 7): Rotation amount applied to stacked items. - `duration` (number, default 0.35): Hover animation duration. - `borderColor` (color, default "transparent"): Border color shown around the active card. Transparent by default. Usage: ```jsx import HoverStack from '@/components/effects/hover-stack' const page = () => { return ( <> ) } ``` Related: Depth Card Stack, Hover Slider, Hyperiux Glitter, Interactive List Preview, Inertia Image ### Infinite Grid Gallery - Slug: `infinite-grid-gallery` · Tier: Pro · Category: Creative Components - Install: `npx hyperiux add infinite-grid-gallery` - Docs: https://vault.hyperiux.com/effects/components/infinite-grid-gallery · Live demo: https://vault.hyperiux.com/demo/infinite-grid-gallery - Dependencies: none beyond React - Tags: CSS - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). Transform image browsing into an endless spatial grid for portfolios, campaigns, and visual archives that need more depth than a flat gallery. Best used for: - Portfolio and campaign galleries where visual abundance is the point. - Studio archives that need movement, depth, and a more memorable browsing surface. - Image-led pages where each item can still resolve into a real link, caption, or case study. Not for: Not for ecommerce catalogues, pricing pages, comparison grids, documentation, or routes where users need fast scanning. Not for image sets where every item must be visible at once before the visitor can make a decision. Accessibility and mobile: The gallery items need text equivalents, real links, and a fallback list or grid. On mobile, reduce camera movement, limit texture count, or switch to a static gallery. Reduced-motion users should get the same images without infinite movement. Performance budget: Cap device pixel ratio, compress textures, lazy-load image assets carefully, pause rendering when offscreen, and dispose of geometries, materials, and textures on route change. Avoid turning one gallery into a GPU donation box. Common mistakes: - Rendering the only gallery content inside WebGL. - Loading too many high-resolution textures before the section is used. - Creating an endless field with no focused item, progress cue, or escape path. Props: - `images` (array, default []): Images rendered in the infinite grid. - `columns` (number, default 4): Desktop grid column count. - `gap` (number, default 44): Spacing between grid images. - `speed` (number, default 1): Grid movement speed. - `imageScale` (number, default 1): Scale applied to gallery images. Usage: ```jsx import InfiniteGridGallery from "@/components/effects/infinite-grid-gallery"; const page = () => { return ( <> ); }; export default page; ``` Related: Book Flip, Colliding Models, Donut Particles, Fractal Glass, Grid Tunnel ### Information Drawer - Slug: `information-drawer` · Tier: Free · Category: Creative Components - Install: `npx hyperiux add information-drawer` - Docs: https://vault.hyperiux.com/effects/components/information-drawer · Live demo: https://vault.hyperiux.com/demo/information-drawer - Dependencies: gsap, lenis - Tags: GSAP, Lenis - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A card-to-drawer component for team profiles, portfolio entries, product details, service explainers, talent directories, editorial cards, and image-led collections where browsing should stay fast but details still need space. Best used for: - Team profile grids and leadership pages. - Portfolio, case-study, and project indexes where each card needs extra context. - Product modules, integrations, or feature libraries. - Service directories where cards need supporting explanation. - Creator, advisor, instructor, or talent directories. - Editorial or visual archives where detail should open without losing browsing context. Not for: Not for critical forms, checkout flows, legal content, dense documentation, long articles, or content that deserves its own permanent URL. Not for hiding essential information that should be visible on the card itself. The drawer should deepen the item, not rescue an underwritten grid. Not for mobile layouts where the drawer becomes cramped unless a full-screen or bottom-sheet adaptation is provided. Accessibility and mobile: Treat the drawer like a proper interactive disclosure or dialog pattern depending on implementation. Use clear labels, close controls, Escape support, focus management, and focus return to the triggering card. Keep the reading order logical and make selected states understandable. On mobile, use a full-screen drawer, bottom sheet, or stacked detail view rather than a narrow desktop side panel. For reduced motion, open the drawer instantly or with a minimal fade instead of long slide, blur, or background-shift animations. Performance budget: Keep drawer content lightweight, optimize images, and avoid rendering every detailed panel at full cost before it is opened. Animate transform and opacity rather than layout-heavy properties. If the grid contains many cards, render only the selected drawer content or use a controlled detail panel. Do not ask the browser to carry fifty hidden profile biographies just in case someone feels curious. Common mistakes: - Opening details without returning focus to the selected card. - Using non-semantic divs for clickable cards. - Hiding important information inside the drawer. - Making the close button hard to find. - Letting the background scroll unpredictably while the drawer is open. - Using a desktop side drawer on mobile without adaptation. - Filling the drawer with too much copy. Props: - `duration` (number, default 0.65): Drawer panel and overlay slide duration in seconds. - `contentDuration` (number, default 0.25): Duration in seconds of the content fade, staged after the panel opens and before it closes. - `contentDelay` (number, default 0.4): Delay in seconds before the staged content fades in, measured from when the drawer starts opening. - `ease` (string, default "power2.inOut"): GSAP easing used by the drawer panel and overlay. - `delay` (number, default 0): Delay before the drawer animation starts, in seconds. - `backgroundColor` (color, default "#ffffff"): Background color of the drawer panel. - `textColor` (color, default "#111111"): Text and icon color inside the drawer panel. - `sidebarWidth` (number | string, default 60): Desktop drawer width. Numbers are treated as viewport-width percentages. - `overlayOpacity` (number, default 0.2): Backdrop opacity while the drawer is open. Usage: ```jsx import InformationDrawer from "@/components/effects/information-drawer"; export default function page() { return ( <> ); } ``` Related: Timeline, Interactive List Preview, Infinite Grid Gallery, GSAP Flip Card ### Interactive List Preview - Slug: `interactive-list-preview` · Tier: Free · Category: Creative Components - Install: `npx hyperiux add interactive-list-preview` - Docs: https://vault.hyperiux.com/effects/components/interactive-list-preview · Live demo: https://vault.hyperiux.com/demo/interactive-list-preview - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A list-preview component that connects feature names, services, or proof items to visible contextual previews. Best used for: - Feature lists that pair short labels with screenshots, diagrams, or proof snippets. - Product pages where preview content helps comparison without requiring pointer-only access. - Product feature lists where previews clarify choices without replacing the list. Not for: Not for lists where every preview contains mandatory content that is inaccessible without pointer movement. Accessibility and mobile: Use focusable controls or links for list items and expose selected or active state clearly. On mobile, use tap-to-preview or stacked detail panels. Performance budget: Keep preview assets compressed and pre-sized, avoid re-rendering the full list on every hover, and pause media previews when the item is inactive. Common mistakes: - Using mouseenter as the only state change. - Making the preview cover the active list item. - Loading heavy previews for items the user never opens. Props: - `imageSize` (number, default 1): Scale multiplier for the hover preview image. - `duration` (number, default 0.6): Preview image reveal and hide duration. - `smoothness` (number, default 0.35): Highlight and row text transition smoothing duration. - `lerp` (number, default 0.18): Pointer-follow smoothing amount; higher values track faster. Usage: ```jsx import InteractiveListPreview from '@/components/effects/interactive-list-preview' const page = () => { return ( <> ) } ``` Related: Hover Slider, Pixelated Image Effect, Hover Stack, Depth Card Stack, Animated FAQ ### Liquid Shatter - Slug: `liquid-shatter` · Tier: Pro · Category: Creative Components - Install: `npx hyperiux add liquid-shatter` - Docs: https://vault.hyperiux.com/effects/components/liquid-shatter · Live demo: https://vault.hyperiux.com/demo/liquid-shatter - Dependencies: gsap, three - Tags: GSAP, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). An interactive WebGL effect that combines fluid light trails, curved geometry, and particle fragmentation into a responsive visual experience. Best used for: - Use Liquid Shatter when technical experimentation and motion design are part of the studio's positioning. - Give a launch campaign a responsive visual interaction that communicates discovery, transformation, or creative exploration. - Present Liquid Shatter as an interactive artwork, allowing visitors to engage directly with the visual composition. - Use liquid motion and particle fragmentation to establish atmosphere in music, gaming, film, or event-related experiences. - Introduce the effect as a focused standalone interaction between more conventional content sections. Not for: Liquid Shatter is not a suitable replacement for ordinary navigation, content transitions, product cards, or functional loading indicators. Avoid using it in checkout flows, dense dashboards, documentation, pricing pages, and interfaces where visitors need to complete tasks quickly. The sustained interaction and visually complex rendering would introduce unnecessary friction. It is also a poor fit for pages already carrying several demanding WebGL scenes, full-screen video backgrounds, or continuous particle systems without a defined performance budget. The central question is whether users gain anything from controlling the visual transformation. If the answer is simply that it looks impressive, a lighter animation may be the better production decision. Accessibility and mobile: Liquid Shatter is predominantly visual, so its interaction must not become the only way to access meaningful information or navigation. If a press-and-hold action triggers the effect, provide an equivalent keyboard-accessible control. Users should not need precise pointer movement or a sustained mouse press to complete an essential page action. For touch devices, review whether the hold gesture conflicts with scrolling, long-press behaviour, or other native interactions. A simplified tap-based activation or reduced visual scene may provide a more predictable experience. Respect prefers-reduced-motion by avoiding continuous fluid movement and particle explosions when reduced motion is requested. Provide a stable visual state or a simpler transition that preserves the surrounding page content. Decorative WebGL output should not be announced as meaningful text by assistive technology. Interaction prompts and controls should remain accessible through ordinary HTML elements. Performance budget: Liquid Shatter deserves particular attention during production because luminous effects, animated geometry, and particle fragmentation can create substantial rendering work. Set practical limits around particle count, drawing resolution, animation updates, and any expensive post-processing. Verify the actual rendering implementation before optimising specific shader stages or geometry operations. The scene should respond consistently throughout the interaction, especially when fluid motion changes into particle dispersion. A visually dramatic shatter followed by dropped frames undermines the effect's strongest moment. Avoid running expensive animation indefinitely when the component is outside the viewport. Test the interaction on integrated graphics, lower-power laptops, and mobile hardware rather than judging performance only on a development workstation. Where appropriate, reduce rendering resolution or visual complexity on constrained devices. Measure actual frame pacing and memory behaviour before choosing those limits. Common mistakes: - Treating fragmentation as random noise - Overloading the scene with particles - Making interaction instructions unclear - Ignoring interrupted interactions - Running expensive rendering offscreen Props: - `ribbonCount` (number, default 7): Number of nested ribbon rings, from 3 to 9. - `scale` (number, default 1): Multiplier on the size of the ribbons. - `ribbonColor` (string, default "#24120a"): Base colour of the lacquered ribbons. - `glowColor` (string, default "#ff6b00"): Colour of the hover glow, light streaks, shards and rim light. - `backgroundColor` (string, default "#111111"): Background behind the canvas. - `metalness` (number, default 0.4): How metallic the ribbon surface is, from 0 to 1. - `roughness` (number, default 0.26): How rough the ribbon surface is, from 0 to 1. - `idleMotion` (number, default 1): Strength of the slow idle undulation. - `streakFrequency` (number, default 1): How often a light runs along a ribbon. 0 turns idle and scroll streaks off. - `hoverStrength` (number, default 1): Strength of the liquid swell that trails the pointer. - `tiltStrength` (number, default 1): How far the ribbons tilt toward the pointer. - `introAnimation` (boolean, default true): Rings ripple out from the centre on mount. Use Replay to see it again. - `sound` (boolean, default true): Plays sounds on tap, hold, shatter and reform. Audio starts on the first press, as browsers require. - `holdToShatter` (boolean, default true): Press and hold to shatter the ribbons into stirrable shards (mouse and trackpad only). - `holdDuration` (number, default 1.9): Seconds of holding needed to charge a shatter. - `reformDelay` (number, default 3): Seconds the shards float, stirrable, before they reform into ribbons. - `particleCount` (number, default 11000): Number of shards the ribbons break into (about half on phones and low-power devices). - `holdHint` (boolean, default true): Shows a small "Press and hold" label with a charge bar at the bottom. Mouse and trackpad only. - `onShatter` (() => void): Called when a full hold shatters the ribbons. - `className` (string, default ""): Extra classes for the root element. It fills the viewport height by default. - `children` (React.ReactNode): Content layered over the canvas. The layer ignores the pointer, so give interactive children pointer-events-auto. Usage: ```jsx import LiquidShatter from '@/components/effects/liquid-shatter' const page = () => { return ( <> ) } export default page ``` Related: Donut Particles, Hyperiux Glitter, Milky Way, Dot Transition ### Shear Wipe - Slug: `shear-wipe` · Tier: Pro · Category: Creative Components - Install: `npx hyperiux add shear-wipe` - Docs: https://vault.hyperiux.com/effects/components/shear-wipe · Live demo: https://vault.hyperiux.com/demo/shear-wipe - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A slanted wipe transition that cuts between routes, sections, or content states with a sharp angled motion. Best used for: - Product sections where two or three related views need to share one visual space. - Agency or portfolio pages that want to switch between capability copy and showcase proof. - Feature sections where the selected content should slide into view with more personality than standard tabs. - Landing pages where the content change should feel graphic, but still remain easy to understand. Not for: Not for page transitions, route changes, checkout flows, dashboards, dense documentation, or large tab systems with many panels. Not for critical information that users must see without clicking. Not for content where hover is the only trigger. The selected view must be available through click, keyboard, and touch. Accessibility and mobile: Use real buttons or a proper tab pattern. Show a clear active state, preserve focus-visible styles, and make every content view reachable by keyboard and touch. The selected panel should have a readable heading or labelled region so users know what changed. On mobile, collapse the layout into stacked panels, tap-controlled cards, or a simplified tab layout. Reduced-motion users should get an instant content switch or a short fade instead of the angled slide. Performance budget: Animate transform, clipping, and opacity rather than layout. Pre-size the content area where possible so the wipe does not create layout shift. Avoid loading heavy media for every inactive panel upfront, and clean up timers, observers, or animation instances when the component unmounts. Common mistakes: - Describing Shear Wipe as a page transition when it is a content-switching component. - Making the vertical labels decorative instead of clickable controls. - Hiding the active state, so users cannot tell whether Components or Showcase is selected. - Putting essential copy only inside an animated layer that is hard to access. - Shipping demo metrics or placeholder claims as real proof. Props: - `componentsTextColor` (string, default "#0D47A1"): Text color for the Components panel. - `componentsBackgroundColor` (string, default "#E3F2FD"): Background color for the Components panel. - `showcaseTextColor` (string, default "#ffffff"): Text color for the Showcase panel. - `showcaseBackgroundColor` (string, default "#0D47A1"): Background color for the Showcase panel. - `clipPathDuration` (number, default 0.9): Duration of the shear clip-path wipe between panels. Usage: ```jsx import ShearWipe from '@/components/effects/shear-wipe' const page = () => { return ( <> ) } export default page ``` Related: Scroll Stack, Animated Toggle, Animated Form, Arrow Fill Button ### Testimonial Swiper - Slug: `testimonial-swiper` · Tier: Pro · Category: Creative Components - Install: `npx hyperiux add testimonial-swiper` - Docs: https://vault.hyperiux.com/effects/components/testimonial-swiper · Live demo: https://vault.hyperiux.com/demo/testimonial-swiper - Dependencies: gsap, lucide-react - Tags: GSAP, Lucide - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A swipeable testimonial component for moving through customer proof with visible controls, keyboard access, and crawlable quote copy. Best used for: - Landing-page proof sections where several short testimonials have equal weight. - Case-study previews where swipe and controls help browsing. - Pages where testimonial copy remains crawlable and not trapped in autoplay state. Not for: Not for the one testimonial that closes the sale, long proof stories, or evidence users must compare before converting. Accessibility and mobile: Provide visible controls, keyboard operation, touch support, current-slide context, and pause behavior. On mobile, consider a stacked proof section when quotes become long. Performance budget: Optimize testimonial media, avoid loading every offscreen asset eagerly, and pause autoplay when inactive, focused, hovered, or offscreen. Common mistakes: - Hiding the strongest proof behind autoplay. - Removing controls because swipe exists. - Announcing every autoplay tick to assistive technology. Props: - `bgColor` (color, default "#edeae2"): Background color behind the testimonial content. - `autoplay` (boolean, default true): Automatically advances testimonials. - `autoplayDelay` (number, default 4500): Delay between testimonial changes in milliseconds. - `showNavigation` (boolean, default true): Shows previous/next controls. - `imageSize` (number, default 1): Scale multiplier for the testimonial images. Usage: ```jsx import TestimonialSwiper from '@/components/effects/testimonial-swiper' const page = () => { return ( <> ) } export default page ``` Related: Number Counter, Zoom Slider, Parallax Gallery ### Timeline - Slug: `timeline` · Tier: Free · Category: Creative Components - Install: `npx hyperiux add timeline` - Docs: https://vault.hyperiux.com/effects/components/timeline · Live demo: https://vault.hyperiux.com/demo/timeline - Dependencies: @gsap/react, gsap, lenis - Tags: GSAP, Lenis - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A scroll-friendly timeline component for product roadmaps, company histories, launch stories, case-study progressions, and process pages where time needs to feel designed rather than dumped into a list. Best used for: - Product roadmap and product-history pages. - Company journey, funding, launch, or growth-story sections. - Case studies that need to explain process over time. - Agency methodology and implementation sequences. - Campaign rollouts where each phase needs a clear place in the story. - Onboarding or adoption flows where users need chronological orientation. Not for: Not for dense release notes, legal timelines, documentation tables, long biographies, pricing explanations, or content that needs direct comparison. Not for weak chronology. If the dates do not tell a meaningful story, a timeline will only make the emptiness more organized. Not for pages where users need all information immediately visible. Use a table or structured list when scanning matters more than narrative. Accessibility and mobile: Preserve a logical reading order. Screen-reader users should receive the milestones in chronological sequence, with dates and descriptions grouped correctly. Decorative connector lines and markers should not be announced as content. On mobile, switch to a vertical or stacked layout when horizontal space becomes cramped. Keep touch targets clear, avoid tiny markers, and make dates easy to read. For reduced motion, show the timeline entries without scroll-linked line drawing, marker travel, or staggered reveal. Performance budget: Keep the milestone count controlled, reserve layout space, animate connector lines and markers with restraint, and avoid measuring every item on every scroll event. If scroll drives progress, throttle updates and clean up observers or timelines on unmount. Large images inside timeline items should be optimized and lazy-loaded where appropriate. The timeline should feel smooth, not like each milestone is asking the browser to reconsider its life choices. Common mistakes: - Adding too many milestones. - Writing milestone descriptions that are too long. - Making the timeline line more important than the story. - Breaking chronological order visually. - Hiding meaningful dates inside images or decorative layers. - Using horizontal layouts on mobile without a simpler fallback. - Making scroll progress feel like fake loading. Props: - `textColor` (color, default "#000000"): Text color used for the timeline title, dates, and milestone descriptions. - `mutedTextColor` (color, default "#3f3f46"): Secondary text color for descriptions and the period label. - `activeColor` (color, default "#ff5f00"): Accent color shared by the active timeline line, dots, and milestone stems. - `backgroundColor` (color, default "#ffffff"): Background color of the timeline section. Usage: ```jsx import Timeline from "@/components/effects/timeline"; export default function page() { return ( <> ); } ``` Related: Information Drawer, Animated FAQ, Depth Card Stack ### Video Player - Slug: `video-player` · Tier: Pro · Category: Creative Components - Install: `npx hyperiux add video-player` - Docs: https://vault.hyperiux.com/effects/components/video-player · Live demo: https://vault.hyperiux.com/demo/video-player - Dependencies: lucide-react - Tags: Lucide - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A branded video player component with usable playback controls for demos, case-study videos, captions, and product proof. Best used for: - Product demo sections where branded controls must stay keyboard-usable. - Case-study pages where poster, captions, and playback states affect trust. - Landing pages where media loading should not block the rest of the page. Not for: Not for videos that need native reliability more than branded chrome, or for pages where captions, controls, or fallback playback cannot be verified. Accessibility and mobile: Expose every control to keyboard users, keep captions available where provided, preserve focus order, and avoid hover-only playback controls on touch screens. Performance budget: Load the poster first, avoid blocking surrounding content on video metadata, and lazy-load heavy media only when the section is likely to be used. Common mistakes: - Styling controls so heavily that play, pause, mute, seek, or captions become unclear. - Autoplaying proof video without user control. - Letting media loading block the rest of the page. Props: - `autoPlay` (boolean, default true): Starts playback automatically when allowed. - `startMuted` (boolean, default true): Initial muted state. - `showCloseButton` (boolean, default true): Shows the close button on the player. - `rounded` (boolean, default false): Rounds the player frame when not fullscreen. - `preserveAspectRatio` (boolean, default true): Uses object-contain instead of object-cover for the video. - `hideControlsDelay` (number, default 1800): Delay before controls auto-hide, in milliseconds. Usage: ```jsx import VideoPlayer from "@/components/effects/video-player"; export default function Page() { return ( <>
); } ``` Related: Grid Tunnel, Interactive List Preview, Hyperiux Glitter, Text Stream ## Navigations (9) ### Directional Menu - Slug: `directional-menu` · Tier: Free · Category: Navigations - Install: `npx hyperiux add directional-menu` - Docs: https://vault.hyperiux.com/effects/navigation/directional-menu · Live demo: https://vault.hyperiux.com/demo/directional-menu - Dependencies: gsap, lucide-react - Tags: GSAP, Lucide - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A direction-aware navigation menu where panels enter from pointer movement while preserving click, keyboard, tap, and focus behavior. Best used for: - Multi-section marketing sites with services, products, resources, docs, or use cases. - Navigation systems where direction-aware panels enhance grouping but never replace click or keyboard paths. - Directional Menu makes wayfinding feel designed while keeping keyboard and mobile paths clear. Not for: Not for tiny sites, hover-only menus, checkout, forms, or navigation where speed and reliability are the whole job. Accessibility and mobile: Use real links, aria-expanded triggers, Escape close, and focus restore. Mobile should use a drawer, accordion, or full-screen menu that does not depend on hover. Performance budget: Keep panel animations short, avoid layout shift, and do not block route transitions or scroll restoration. Common mistakes: - Relying on hover only for Directional Menu. - Forgetting Escape close and focus restore. - Making a simple three-link site feel overbuilt. Props: - `closeDelay` (number, default 80): Delay before closing the menu. - `panelGap` (number, default 20): Gap between trigger and submenu panel. - `activeColor` (string, default "#ffffff"): Color for active menu state. - `inactiveColor` (string, default "#ffffff"): Color for inactive menu state. - `duration` (number, default 0.35): Menu transition duration. - `menuBgColor` (string, default "#ffffff"): Background color of the menu dropdown panels. Usage: ```jsx import DirectionalMenu from '@/components/effects/directional-menu' const page = () => { return ( ) } ``` Related: Expanding Navbar, Elevate Navbar ### Displacement Navbar - Slug: `displacement-navbar` · Tier: Pro · Category: Navigations - Install: `npx hyperiux add displacement-navbar` - Docs: https://vault.hyperiux.com/effects/navigation/displacement-navbar · Live demo: https://vault.hyperiux.com/demo/displacement-navbar - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). An animated navigation component for portfolios, agency websites, product ecosystems, creative studios, and brand-led interfaces where the menu should feel spatial, editorial, and deliberate. Best used for: - Portfolio and agency websites where navigation should carry visual presence. - SaaS, AI, and product ecosystems with a compact set of primary routes. - Template libraries, component directories, and documentation-adjacent products. - Campaign microsites where the menu should feel authored. - Editorial and design-led websites where route hierarchy benefits from preview content. - Desktop-first brand experiences that still need a sensible mobile fallback. Not for: Not for complex enterprise navigation with deep nesting, admin dashboards, ecommerce mega menus, dense documentation sidebars, or workflows where users need instant utilitarian navigation. Not for menus with unclear route labels. Motion can make navigation memorable, but it cannot make vague labels useful. Not for pages where the preview image becomes louder than the route structure. Navigation is not a moodboard with escape-key support. Accessibility and mobile: Use a semantic navigation landmark, real links, and button controls. The menu trigger should have a clear accessible label and expanded state. Support keyboard access, visible focus states, Escape-to-close behavior, and focus return to the trigger. If the menu behaves like an overlay, prevent unsafe background interaction while it is open and keep the focus order predictable. Hover-preview behavior should also work through keyboard focus. On mobile, simplify the layout into a full-screen menu, stacked panel, or bottom-sheet style pattern. Reduce preview media, increase tap target size, and keep the close control visible. For reduced motion, remove displacement travel, long stagger, preview motion, and panel shifts. Open the menu instantly or with a minimal fade. Performance budget: Keep the menu animation lightweight. Animate transform, opacity, clip-path, or height with restraint. Avoid layout-heavy transitions across too many nested elements. Optimise preview images and avoid loading every large media asset before the menu is opened. If preview media changes on hover, preload carefully or use small optimized images. Clean up event listeners, outside-click handlers, scroll locks, timers, and animation instances when the component unmounts. Avoid long stagger chains. Navigation should feel polished, not delayed. Common mistakes: - Using a div instead of a button for the trigger. - Making hover previews unavailable to keyboard users. - Letting preview images compete with primary route labels. - Hiding important routes in tiny secondary columns. - Forgetting Escape-to-close and focus return. - Loading heavy preview media before the menu opens. - Creating a beautiful menu with no active route state. - Forcing the full desktop layout onto mobile. Props: - `openDuration` (number, default 0.65): Page displacement and bar/mark open duration, in seconds. - `closeDuration` (number, default 0.65): Page displacement and bar/mark close duration, in seconds. Matches openDuration by default so the close mirrors the open. - `contentStagger` (number, default 0.055): Delay between each shelf content item fading in on open, and out again on close in reverse order. - `imageSwapDuration` (number, default 0.5): Duration of the figure image cross-swap on link hover, in seconds. - `showMedia` (boolean, default true): Shows the figure image panel next to the primary links. - `shelfBackground` (string, default "#151515"): Shelf and header background color. - `pageGradientFrom` (string, default "#0D47A1"): Start color of the displaced page's gradient. - `pageGradientTo` (string, default "#E3F2FD"): End color of the displaced page's gradient. - `pageBackground` (string): Escape hatch for the displaced page background - any CSS background value. Overrides the gradient colors when set. - `linkColor` (string, default "#f4f3f1"): Primary and info link text color. - `mutedColor` (string, default "rgba(244,243,241,0.38)"): Index numerals, captions, and dimmed-state color. - `hairlineColor` (string, default "rgba(244,243,241,0.14)"): Bar seam and footer divider color. - `charStagger` (number, default 0.01): Per-character reveal delay on link hover, in seconds. - `showLinkUnderline` (boolean, default true): Shows the underline draw-in under hovered links. - `dimInactiveLinks` (boolean, default true): Dims sibling primary links while one is hovered. - `primaryLinks` (array, default [{"label":"Components"},{"label":"Templates"},{"label":"Showcase"},{"label":"Docs"}]): Numbered primary navigation links shown in the shelf. - `infoLinks` (array, default [{"label":"About"},{"label":"Pricing"},{"label":"Changelog"},{"label":"Contact"}]): Secondary info links shown in the shelf. - `socials` (array, default [{"label":"X"},{"label":"GitHub"},{"label":"Discord"}]): Social links shown in the shelf footer. - `media` (array, default [{"src":"https://picsum.photos/seed/img01/1600/1200","caption":"Drop-in motion primitives"},{"src":"https://picsum.photos/seed/img02/1600/1200","caption":"Full pages, wired and ready"},{"src":"https://picsum.photos/seed/img03/1600/1200","caption":"Built with Hyperiux in the wild"},{"src":"https://picsum.photos/seed/img04/1600/1200","caption":"Guides, props and recipes"}]): Images and captions shown in the figure panel, matched to primary links. - `brand` (string, default "Hyperiux"): Brand label shown in the header. - `email` (string, default "hello@hyperiux.com"): Contact email shown in the shelf footer. - `cities` (string, default "Remote / Worldwide"): Location label shown in the shelf footer. Usage: ```jsx import DisaplacementNavbar from '@/components/effects/displacement-navbar' const page = () => { return ( ) } ``` Related: Morphing Dock, Unfold Navbar, Side Navbar, Directional Menu ### Elevate Navbar - Slug: `elevate-navbar` · Tier: Free · Category: Navigations - Install: `npx hyperiux add elevate-navbar` - Docs: https://vault.hyperiux.com/effects/navigation/elevate-navbar · Live demo: https://vault.hyperiux.com/demo/elevate-navbar - Dependencies: gsap, lucide-react - Tags: GSAP, Lucide - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A responsive navbar with animated dropdowns, text-swap hover effects, and a collapsible mobile menu. Best used for: - SaaS and product pages where the header needs to group several sections into image-preview dropdowns. - Header navigation that should improve orientation without adding layout shift. - Elevate Navbar makes wayfinding feel designed while keeping the mobile menu clear for keyboard and touch. Not for: Not for tiny sites, hover-only menus, checkout, forms, or navigation where speed and reliability are the whole job. Accessibility and mobile: Use real links, aria-expanded triggers, Escape close, and focus restore. Mobile should use a drawer, accordion, or full-screen menu that does not depend on hover. Performance budget: Keep panel animations short, avoid layout shift, and do not block route transitions or scroll restoration. Common mistakes: - Relying on hover only for Elevate Navbar. - Forgetting Escape close and focus restore. - Making a simple three-link site feel overbuilt. Props: - `backgroundColor` (string, default "#d8b4fe"): Page background behind the navbar. - `ctaBackground` (string, default "#ffffff"): CTA button background color. - `ctaHoverBackground` (string, default "#000000"): CTA button hover background color. - `activeColor` (string, default "#ffffff"): Active and focused nav link color. - `inactiveColor` (string, default "rgba(255,255,255,0.5)"): Dimmed nav link color while another item is active. - `duration` (number, default 0.35): Nav, dropdown, and mobile accordion animation duration. - `ease` (string, default "power2.out"): GSAP easing used for nav and dropdown transitions. - `staggerItems` (boolean, default true): Reveals dropdown items one by one. Usage: ```jsx import ElevateNavbar from '@/components/effects/elevate-navbar' const page = () => { return ( <> ) } ``` Related: Expanding Navbar, Directional Menu, Sticky Content Wrapper, Link Button ### Expanding Navbar - Slug: `expanding-navbar` · Tier: Pro · Category: Navigations - Install: `npx hyperiux add expanding-navbar` - Docs: https://vault.hyperiux.com/effects/navigation/expanding-navbar · Live demo: https://vault.hyperiux.com/demo/expanding-navbar - Dependencies: gsap, lucide-react - Tags: GSAP, Lucide - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A compact navigation component that expands only when needed for link-dense marketing pages, product sites, and mobile-friendly menus. Best used for: - Compact headers with enough links to justify expansion on demand. - Space-constrained marketing pages where the menu can grow without hiding the route. - Expanding Navbar makes wayfinding feel designed while keeping keyboard and mobile paths clear. Not for: Not for tiny sites, hover-only menus, checkout, forms, or navigation where speed and reliability are the whole job. Accessibility and mobile: Use real links, aria-expanded triggers, Escape close, and focus restore. Mobile should use a drawer, accordion, or full-screen menu that does not depend on hover. Performance budget: Keep panel animations short, avoid layout shift, and do not block route transitions or scroll restoration. Common mistakes: - Relying on hover only for Expanding Navbar. - Forgetting Escape close and focus restore. - Making a simple three-link site feel overbuilt. Props: - `expandedWidth` (number, default 98): Expanded desktop panel width in viewport units. - `duration` (number, default 1): Expansion animation duration. - `backgroundColor` (string, default "#ffffff"): Navbar background color. - `activeColor` (string, default "#ff5f00"): Hover or active link accent color. - `menuBackgroundColor` (string, default "#111111"): Background color of the menu bar and expanded menu panels. Usage: ```jsx import ExpandingNavbar from '@/components/effects/expanding-navbar' const Page = () => { return ( ) } ``` Related: Scroll Distortion, Horizontal Feature Reveal, Directional Menu, Elevate Navbar ### Immersive Full-Screen Navigation - Slug: `immersive-full-screen-nav` · Tier: Free · Category: Navigations - Install: `npx hyperiux add immersive-full-screen-nav` - Docs: https://vault.hyperiux.com/effects/navigation/immersive-full-screen-nav · Live demo: https://vault.hyperiux.com/demo/immersive-full-screen-nav - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A full-screen navigation overlay for portfolio, agency, and brand websites where opening the menu becomes a designed brand moment. Best used for: - Portfolio and brand sites where opening the menu is intentionally part of the experience. - Menus that can trap focus while open, close on Escape, and restore focus to the trigger. - Immersive Full Screen Navigation makes wayfinding feel designed while keeping keyboard and mobile paths clear. Not for: Not for tiny sites, hover-only menus, checkout, forms, or navigation where speed and reliability are the whole job. Accessibility and mobile: Use real links, aria-expanded triggers, Escape close, and focus restore. Mobile should use a drawer, accordion, or full-screen menu that does not depend on hover. Performance budget: Keep panel animations short, avoid layout shift, and do not block route transitions or scroll restoration. Common mistakes: - Relying on hover only for Immersive Full Screen Navigation. - Forgetting Escape close and focus restore. - Making a simple three-link site feel overbuilt. Props: - `overlayBg` (string, default "#ff5f00"): Fullscreen overlay background color. - `headerOpenColor` (string, default "#ffffff"): Hamburger bar color while open. - `linkColor` (string, default "#ffffff"): Navigation link color. - `linkHoverColor` (string, default "#a3a3a3"): Navigation link hover color. - `clipOrigin` (string, default "bottom"): Edge where the overlay reveals from. - `openDuration` (number, default 1.2): Overlay open duration. - `closeDuration` (number, default 1.2): Overlay close duration. - `ease` (string, default "power4.inOut"): Overlay reveal easing. - `linkStagger` (number, default 0.07): Delay between nav links. - `imageStagger` (number, default 0.02): Delay between overlay images. - `socialStagger` (number, default 0.06): Delay between social links. Usage: ```jsx import ImmersiveFullscreenNav from '@/components/effects/immersive-full-screen-nav' const page = () => { return ( <> ) } ``` Related: Directional Menu, Expanding Navbar, Elevate Navbar ### Morphing Dock - Slug: `morphing-dock` · Tier: Pro · Category: Navigations - Install: `npx hyperiux add morphing-dock` - Docs: https://vault.hyperiux.com/effects/navigation/morphing-dock · Live demo: https://vault.hyperiux.com/demo/morphing-dock - Dependencies: @gsap/react, gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A floating dock navigation component for portfolios, agency websites, SaaS pages, product microsites, and brand-led interfaces where navigation should stay compact until the user asks for more. Best used for: - Portfolio and agency websites where the navigation should feel designed. - SaaS and product launch pages that need a compact persistent menu. - Template, component, and product directories with a small set of primary routes. - Campaign microsites where standard headers feel too heavy. - Editorial and creative projects where navigation should support the visual system. - Mobile-adapted menus where compact controls matter. Not for: Not for complex enterprise navigation, large ecommerce menus, admin dashboards, documentation systems with many nested sections, or product areas that need persistent sidebar navigation. Not for hiding essential routes behind unclear controls. A dock can be compact, but it cannot be cryptic. Not for pages where navigation speed matters more than ceremony. If the user knows exactly where they want to go, the menu should not make them sit through a tiny architectural transformation first. Accessibility and mobile: Use a semantic navigation landmark and real links. The dock trigger should be a button with an accessible label and expanded state. Support keyboard operation, visible focus states, Escape-to-close, and focus return. On mobile, keep dock controls large enough to tap and avoid placing critical actions too close to screen edges. The expanded state may need to behave like a bottom sheet, centred panel, or full-screen menu depending on available space. For reduced motion, remove shape travel, long scaling, spring overshoot, and staggered link movement. Open the expanded menu instantly or with a minimal fade while keeping the same routes available. Performance budget: Keep the morph lightweight. Animate transform, opacity, clip-path, width, height, and border radius with restraint, and avoid layout-heavy recalculation across many nested elements. Stagger links subtly rather than turning every route into a separate entrance ceremony. Clean up event listeners, outside-click handlers, scroll locks, and animation instances when the component unmounts. If preview media appears inside the expanded menu, optimise it and avoid loading heavy assets before the menu is opened. Common mistakes: - Making the compact trigger unclear. - Using clickable divs instead of buttons and links. - Forgetting Escape-to-close and focus return. - Animating the dock so slowly that navigation becomes friction. - Hiding important routes inside decorative preview panels. - Loading heavy preview media before the menu is opened. - Forcing the same desktop dock geometry onto mobile. - Treating the morph as more important than route clarity. Props: - `duration` (number, default 1): Duration multiplier for dock animations; 1 preserves the original timing proportions. - `staggerStep` (number, default 0.01): Delay in seconds between animated letters. - `showLine` (boolean, default true): Draw navigation link underlines on hover and focus. The CTA never shows an underline. - `backgroundColor` (color, default "#111111"): Dock and expanded panel background. - `textColor` (color, default "#d2d2d2"): Resting navigation and CTA link color. - `hoverColor` (color, default "#ffffff"): Navigation and CTA link hover and focus color. - `brand` (string, default "HYPERIUX"): Dock brand label. - `contactLabel` (string, default "Contact"): Contact link label. - `email` (string, default "hello@hyperiux.com"): Contact email address. - `emailNote` (string, default "Partnerships, press and support."): Supporting contact text. - `ctaLabel` (string, default "Get started"): CTA label. - `ctaHref` (string, default "#"): CTA destination. - `teaserImage` (string, default "https://picsum.photos/seed/v10/1600/1200"): Preview image URL. - `teaserHref` (string, default "#"): Preview destination. - `expandedWidth` (number, default 48): Expanded nav panel width in viewport units. - `expandedHeight` (number, default 26): Expanded nav panel height in viewport units. - `items` (array, default [{"label":"Components","href":"#","blurb":"Drop-in motion primitives"},{"label":"Templates","href":"#","blurb":"Full pages, wired and ready"},{"label":"Showcase","href":"#","blurb":"Built with Hyperiux in the wild"},{"label":"Docs","href":"#","blurb":"Guides, props and recipes"}]): Navigation items with label, href, and blurb strings. Usage: ```jsx import MorphingDock from '@/components/effects/morphing-dock' const page = () => { return ( ) } ``` Related: Unfold Navbar, Side Navbar, Directional Menu ### Perspective Shift Menu - Slug: `perspective-shift-menu` · Tier: Pro · Category: Navigations - Install: `npx hyperiux add perspective-shift-menu` - Docs: https://vault.hyperiux.com/effects/navigation/perspective-shift-menu · Live demo: https://vault.hyperiux.com/demo/perspective-shift-menu - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A cinematic navigation component for portfolios, studio websites, product launches, campaign pages, and brand-led interfaces where opening the menu should feel like entering a separate navigation layer. Best used for: - Portfolio and agency websites where navigation contributes to brand feel. - Product launches and campaign pages with a cinematic visual system. - SaaS, AI, and developer-tool sites where categories need a structured menu surface. - Editorial microsites where the menu can behave like a chapter layer. - Navigation systems with primary routes plus secondary categories or supporting links. Not for: Not for dense enterprise dashboards, admin tools, checkout flows, documentation-heavy products, or pages where users need fast utility navigation above all else. Not for menus with weak structure. A perspective transition can make navigation feel premium, but it cannot fix unclear information architecture. Not for mobile unless the menu simplifies cleanly. A desktop 3D shift forced onto a small screen can quickly become a tiny tilted website pretending to be useful. Accessibility and mobile: Use a semantic button for the menu trigger, clear labels, visible focus states, keyboard navigation, Escape close behavior, and focus return to the trigger when the menu closes. If the menu behaves like a modal layer, keep focus inside the menu while it is open and prevent background content from being reached accidentally. If it behaves like a non-modal navigation panel, make background interaction predictable. On mobile, simplify the perspective shift, reduce rotation, and prioritize readable navigation links. For reduced motion, remove the 3D page movement and open the menu with a simple fade, slide, or instant state change. Performance budget: Keep transforms GPU-friendly. Animate transform, opacity, and overlay states rather than layout-heavy properties. Avoid large blur filters, excessive shadows, and continuous animation while the menu is open. Clean up keyboard listeners, scroll locks, and route-change side effects when the menu closes or the component unmounts. The menu should feel dramatic for the user, not for the browser’s memory profile. Common mistakes: - Making the animation stronger than the navigation. - Forgetting Escape close and focus return. - Leaving background page elements focusable when the menu should be modal. - Using unclear nested categories. - Letting the transformed page become unreadable or distracting. - Forcing desktop perspective behavior onto mobile. - Using a hamburger menu because it looks clean while hiding routes users actually need. Props: - `animationSpeed` (number, default 1): Opening and closing speed multiplier. Higher values animate faster. - `tiltAngle` (number, default 20): How far the page rotates away, in degrees. 0 slides without tilting. - `linkStagger` (number, default 0): Delay between nav links as they enter, in seconds. - `charStagger` (number, default 0.007): Delay between characters on link hover, in seconds. - `panelWidth` (number, default 22): Nav column width, in vw. - `drawerWidth` (number, default 18): Sub-drawer width, in vw. - `panelColor` (string, default "#ffffff"): Nav column and sub-drawer surface color. - `textColor` (string, default "#111111"): Links, headings, and menu icon color. - `voidColor` (string, default "#0e0e0e"): The void behind the page as it tilts away. - `dimOpacity` (number, default 0.4): How strongly the receded page is dimmed, 0 to 1. Usage: ```jsx import PerspectiveShiftMenu from '@/components/effects/perspective-shift-menu' const page = () => { return ( ) } ``` Related: Side Navbar, Directional Menu, Unfold Navbar, Morphing Dock ### Side Navbar - Slug: `side-navbar` · Tier: Pro · Category: Navigations - Install: `npx hyperiux add side-navbar` - Docs: https://vault.hyperiux.com/effects/navigation/side-navbar · Live demo: https://vault.hyperiux.com/demo/side-navbar - Dependencies: gsap - Tags: GSAP, CSS - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A hamburger-triggered side navigation panel with primary links, contact details, and social routes for compact brand and portfolio navigation. Best used for: - Portfolio, agency, and campaign sites where the header should stay minimal. - Compact navigation systems that need primary links, contact details, and social links in one panel. - Brand-led sites where opening navigation can be a polished interaction without slowing route access. Not for: Not for complex apps, dashboards, dense product navigation, large documentation sites, or menus with many nested levels. Not for sites where all primary actions need to remain visible at all times. Accessibility and mobile: Use a real button for the hamburger trigger with an accessible label. Move focus into the menu when it opens, trap focus while open if the panel behaves modally, support Escape close, and restore focus to the trigger when it closes. On mobile, keep tap targets large and make the close control easy to reach. Performance budget: Animate transform and opacity rather than layout, avoid re-rendering the whole page when the menu opens, lock background scroll cleanly, and remove listeners after close or route change. Common mistakes: - Building the hamburger trigger with a generic div instead of a real button. - Opening a menu without moving keyboard focus into it. - Forgetting Escape close and focus restoration. - Letting the side panel cover content while background scroll remains active. - Hiding important navigation links behind hover-only states. Props: - `panelWidth` (number, default 50): Width of the sliding menu panel as a percentage of the viewport on desktop. - `openDuration` (number, default 0.5): Duration of the sidebar opening and closing slide. - `linksStagger` (number, default 0.05): Stagger between the main navigation links as they animate in. - `socialsStagger` (number, default 0.05): Stagger between the social links as they animate in. - `linkColor` (string, default "#ffffff"): Color of the menu links, socials and divider. - `panelBackgroundColor` (string, default "#000000"): Background color of the sliding menu panel (opacity is set separately). - `panelOpacity` (number, default 0.2): Opacity of the panel background color. - `panelBlur` (string, default "md"): Backdrop blur strength behind the panel. Usage: ```jsx import SideNavbar from '@/components/side-navbar' const page = () => { return ( <>
) } export default page ``` Related: Expanding Navbar, Elevate Navbar ### Unfold Navbar - Slug: `unfold-navbar` · Tier: Pro · Category: Navigations - Install: `npx hyperiux add unfold-navbar` - Docs: https://vault.hyperiux.com/effects/navigation/unfold-navbar · Live demo: https://vault.hyperiux.com/demo/unfold-navbar - Dependencies: @gsap/react, gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). An animated navigation component for portfolios, agency websites, SaaS landing pages, product microsites, and brand-led interfaces where the menu should feel like part of the experience, not a default browser afterthought. Best used for: - Portfolio and agency sites where navigation should carry brand presence. - SaaS and product pages that need a compact header with a richer open state. - Campaign microsites where the menu should feel authored, not generic. - Editorial and creative pages where links need more visual rhythm. - Product ecosystems with primary routes, secondary resources, and one clear CTA. - Mobile-first layouts where an expandable menu is more practical than a wide nav bar. Not for: Not for dense enterprise navigation with many nested levels, complex permissions, admin dashboards, documentation sidebars, ecommerce mega menus, or workflows where speed matters more than ceremony. Not for hiding routes behind unclear icons or experimental triggers. A menu can unfold beautifully and still fail if users do not know it is a menu. Not for pages where the animation delays basic navigation. Getting to another page should not feel like waiting for a stage curtain to remember its cue. Accessibility and mobile: Use a semantic navigation landmark and real links. The trigger should be a button with a clear accessible label and expanded state. Support keyboard operation, visible focus states, Escape-to-close, and focus return to the trigger. If the open menu behaves like an overlay, keep focus inside the menu while it is active or make the focus order predictable and safe. On mobile, make links large enough to tap, keep close controls obvious, and avoid tiny secondary actions near screen edges. For reduced motion, remove unfolding travel, long stagger, panel rotation, and spring overshoot. Open the menu instantly or with a minimal fade while keeping the same routes available. Performance budget: Keep the menu animation lightweight. Animate transform, opacity, clip-path, or scale with restraint. Avoid layout-heavy transitions across many nested elements, and do not recalculate menu positions on every frame. Stagger links subtly. Long stagger chains can make navigation feel slow, especially when users already know where they want to go. Clean up listeners, scroll locks, timers, and animation instances when the component unmounts. Common mistakes: - Using a div instead of a button for the menu trigger. - Making the menu icon unclear. - Forgetting Escape-to-close and focus return. - Letting the menu cover the page without a visible close action. - Animating every link so slowly that navigation becomes friction. - Hiding important routes inside decorative panels. - Building a beautiful menu with no active route state. - Forcing the same unfold layout onto mobile without checking tap comfort. Props: - `backgroundColor` (string, default "#ebebeb"): Navbar surface color. - `textColor` (string, default "#111111"): Main links and menu icon color. - `mutedColor` (string, default "rgba(0,0,0,0.5)"): Numbers, secondary links, captions, and dimmed links color. - `animationSpeed` (number, default 1): Opening and closing speed multiplier. Higher values animate faster. - `charStagger` (number, default 0.015): Delay between characters on link hover, in seconds. - `showLinkUnderline` (boolean, default false): Show the animated underline on link hover. - `showNumbers` (boolean, default false): Show numbers beside primary links. - `dimInactiveLinks` (boolean, default true): Dim other primary links while hovering a row. - `showFeature` (boolean, default true): Show the feature image and caption. Usage: ```jsx import UnfoldNavbar from '@/components/effects/unfold-navbar' const page = () => { return ( ) } ``` Related: Side Navbar, Directional Menu, Elevate Navbar, Morphing Dock ## Cursor Effects (17) ### Butterfly Trail Cursor - Slug: `butterfly-trail-cursor` · Tier: Pro · Category: Cursor Effects - Install: `npx hyperiux add butterfly-trail-cursor` - Docs: https://vault.hyperiux.com/effects/cursor-effects/butterfly-trail-cursor · Live demo: https://vault.hyperiux.com/demo/butterfly-trail-cursor - Dependencies: @react-three/drei, @react-three/fiber, three - Tags: Drei, React Three Fiber, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A playful cursor trail effect that leaves butterfly-like forms behind the pointer for creative, retail, culture, and campaign pages. Best used for: - Portfolio and campaign heroes where playful pointer motion fits the brand personality. - Desktop-only decorative layers that can disappear without removing content or controls. - Butterfly Trail Cursor gives pointer movement a brand role without hiding core controls or content. Not for: Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere. Accessibility and mobile: Switch it off for coarse pointers and leave touch native; anything revealed by the cursor needs a visible or tap-accessible alternative. Performance budget: Use one cursor layer, throttle movement with requestAnimationFrame, avoid full-screen filter effects, and disable Butterfly Trail Cursor on coarse pointers. Common mistakes: - Letting Butterfly Trail Cursor cover focus rings or clickable controls. - Forgetting to disable the effect on coarse pointers. - Hiding useful content behind mouse-only movement. Props: - `butterflyCount` (number, default 14): Number of trail butterflies. - `trailDistance` (number, default 18): Distance between trail items. - `wingColor` (string, default "#ffffff"): Primary butterfly wing color. - `size` (number, default 28): Rendered butterfly size. - `followSpeed` (number, default 0.18): How quickly the trail follows the pointer. Usage: ```jsx import ButterflyTrailCursor from "@/components/effects/butterfly-trail-cursor"; import React from "react"; const page = () => { return ( <> ); }; export default page; ``` Related: Coffee Bean Cursor, Card Drift, Cursor Move, Horizontal Feature Reveal, Elevate Navbar ### Character Trail - Slug: `character-trail` · Tier: Pro · Category: Cursor Effects - Install: `npx hyperiux add character-trail` - Docs: https://vault.hyperiux.com/effects/cursor-effects/character-trail · Live demo: https://vault.hyperiux.com/demo/character-trail - Dependencies: none beyond React - Tags: Vanilla JS - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A typographic cursor trail effect that turns pointer movement into a stream of characters for editorial, portfolio, and developer-tool pages. Best used for: - Editorial and developer-tool pages where the cursor can leave a typographic texture. - Short hero sections where the text trace supports tone without becoming the message. - Character Trail Cursor gives pointer movement a brand role without hiding core controls or content. Not for: Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere. Accessibility and mobile: Turn the effect off on touch and keep native gestures intact, and give any cursor-only reveal a visible or tappable alternative. Performance budget: Use one cursor layer, throttle movement with requestAnimationFrame, avoid full-screen filter effects, and disable Character Trail Cursor on coarse pointers. Common mistakes: - Letting Character Trail Cursor cover focus rings or clickable controls. - Forgetting to disable the effect on coarse pointers. - Hiding useful content behind mouse-only movement. Props: - `characters` (string, default "HYPERIUX"): Characters emitted by the cursor trail. - `trailLength` (number, default 24): Maximum number of visible characters. - `fontSize` (number, default 18): Size of each trail character. - `textColor` (string, default "#ffffff"): Trail character color. - `colorCount` (number, default 6): How many of the colors below the trail cycles through (1-6). - `color1` (string, default "#1a1a2e"): Hex code for trail color 1. - `color2` (string, default "#c8f752"): Hex code for trail color 2. - `color3` (string, default "#7D4E57"): Hex code for trail color 3. - `color4` (string, default "#5c3d8f"): Hex code for trail color 4. - `color5` (string, default "#2d2d2d"): Hex code for trail color 5. - `color6` (string, default "#c3dfe0"): Hex code for trail color 6. - `textColor1` (string, default "#ffffff"): Hex code for the text on trail color 1. - `textColor2` (string, default "#1a1a2e"): Hex code for the text on trail color 2. - `textColor3` (string, default "#ffffff"): Hex code for the text on trail color 3. - `textColor4` (string, default "#ffffff"): Hex code for the text on trail color 4. - `textColor5` (string, default "#ffffff"): Hex code for the text on trail color 5. - `textColor6` (string, default "#1a1a2e"): Hex code for the text on trail color 6. - `fadeDuration` (number, default 0.8): Time before trail characters fade out. Usage: ```jsx import CharacterTrail from '@/components/effects/character-trail' export default function Page() { return ( <> ) } ``` Related: Butterfly Trail Cursor, Helix Slider, Split Canvas, Draggable Marquee ### Coffee Bean Cursor - Slug: `coffee-bean-cursor` · Tier: Pro · Category: Cursor Effects - Install: `npx hyperiux add coffee-bean-cursor` - Docs: https://vault.hyperiux.com/effects/cursor-effects/coffee-bean-cursor · Live demo: https://vault.hyperiux.com/demo/coffee-bean-cursor - Dependencies: @react-three/drei, @react-three/fiber, three - Tags: Drei, React Three Fiber, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A branded 3D object effect where a stream of coffee beans scatters and swirls away from the pointer, for food, retail, hospitality, and campaign-led websites. Best used for: - Food, retail, and campaign pages where a field of branded 3D objects can react to the pointer. - Experience-led homepages where the bean stream adds delight but ordering and navigation stay precise. - Coffee Bean Cursor gives pointer movement a brand role without hiding core controls or content. Not for: Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere. Accessibility and mobile: Disable on coarse pointers and preserve normal touch behavior. Cursor-only reveals must have visible or tap-accessible alternatives. Performance budget: Use one full-viewport WebGL canvas, lower beanCount on weaker devices, rely on the built-in pause when offscreen or the tab is hidden, and disable Coffee Bean Cursor on coarse pointers. Common mistakes: - Letting Coffee Bean Cursor cover focus rings or clickable controls. - Forgetting to disable the effect on coarse pointers. - Hiding useful content behind mouse-only movement. Props: - `beanCount` (number, default 300): Number of beans in the flowing cursor field. - `beanColor` (string, default "#392416"): Coffee bean color. - `size` (number, default 22): Rendered bean size. - `rotationSpeed` (number, default 1): Rotation speed for each bean. - `mouseInteraction` (boolean, default true): Enables mouse-reactive bean movement. - `scatterIntensity` (number, default 1): Strength and radius of the mouse scatter force. Usage: ```jsx import CoffeeBeanCursor from '@/components/effects/coffee-bean-cursor' const page = () => { return ( <> ) } export default page ``` Related: Butterfly Trail Cursor, Split Canvas, Character Trail, Donut Particles ### Colorful Cursor Aura - Slug: `colorful-cursor-aura` · Tier: Pro · Category: Cursor Effects - Install: `npx hyperiux add colorful-cursor-aura` - Docs: https://vault.hyperiux.com/effects/cursor-effects/colorful-cursor-aura · Live demo: https://vault.hyperiux.com/demo/colorful-cursor-aura - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A headline cursor effect where three rings of color follow the pointer inside the letters of large text, without hiding controls or page content. Best used for: - Creative homepages that need a large headline to react to the pointer instead of image trails. - Brand pages where the cursor can add mood while leaving controls visually clear. - Colorful Cursor Aura gives pointer movement a brand role without hiding core controls or content. Not for: Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere. Accessibility and mobile: Switch it off for coarse pointers and leave touch native; anything revealed by the cursor needs a visible or tap-accessible alternative. Performance budget: Use one cursor layer, throttle movement with requestAnimationFrame, avoid full-screen filter effects, and disable Colorful Cursor Aura on coarse pointers. Common mistakes: - Letting Colorful Cursor Aura cover focus rings or clickable controls. - Forgetting to disable the effect on coarse pointers. - Hiding useful content behind mouse-only movement. Props: - `auraSize` (number, default 325): Diameter of the cursor aura. - `color1` (string, default "#a78bfa"): Outer aura ring color. - `color2` (string, default "#fb7185"): Middle aura ring color. - `color3` (string, default "#fde68a"): Inner aura ring color. - `followSpeed` (number, default 0.12): How quickly the aura follows the cursor. Usage: ```jsx import ColorfulCursorAura from '@/components/effects/colorful-cursor-aura' const Page = () => { return ( <> ) } ``` Related: Milky Way, Butterfly Trail Cursor, Grid Tunnel, Draggable Canvas, Gooey Counter ### Cursor Move - Slug: `cursor-move` · Tier: Pro · Category: Cursor Effects - Install: `npx hyperiux add cursor-move` - Docs: https://vault.hyperiux.com/effects/cursor-effects/cursor-move · Live demo: https://vault.hyperiux.com/demo/cursor-move - Dependencies: none beyond React - Tags: Mouse tracking - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). Make the page respond to pointer position with animated text, coordinates, or visual feedback that feels reactive without taking over. Best used for: - Creative portfolio heroes where pointer tracking supports the brand personality. - Experimental landing sections that need a small desktop-only interaction. - Demo pages where coordinates, text bending, or cursor response is the point. Not for: Not for product flows, forms, dashboards, checkout, mobile-first pages, or any screen where pointer movement would distract from task completion. Not for long pages where the effect follows the visitor forever. Accessibility and mobile: Disable on coarse pointers and keep native touch behavior. Do not expose rapidly changing coordinates to assistive technology unless they are essential, which they usually are not. Reduced-motion users should get static text. Performance budget: Throttle pointer updates with requestAnimationFrame, avoid updating React state on every raw mouse event where unnecessary, and clean up listeners on route change. Common mistakes: - Updating layout on every pointer move. - Making coordinates or animated letters the only readable text. - Forgetting the “desktop only” nature of the interaction. Props: - `text` (string, default "hello!"): Text affected by cursor movement. - `textColor` (color, default "#f97316"): Color of the cursor-reactive text. - `showCrosshair` (boolean, default true): Shows the cursor-following crosshair. - `crosshairVariant` (string, default "solid"): Crosshair line style. - `showCursorDot` (boolean, default true): Shows the small cursor dot. - `crosshairColor` (color, default "#ffffff"): Crosshair line color (drawn at 20% strength). - `cursorDotColor` (color, default "#f97316"): Color of the small cursor dot. - `lerp` (number, default 0.2): Mouse-follow smoothing amount; lower values feel smoother and slower, higher values track faster. - `showCoordinates` (boolean, default true): Shows the live x/y coordinate readout. Usage: ```jsx import CursorMove from '@/components/effects/cursor-move' const page = () => { return ( <> ) } export default page ``` Related: Full Screen Crosshair, Helix Slider, Zoom Slider ### Dotted Trail - Slug: `dotted-trail` · Tier: Free · Category: Cursor Effects - Install: `npx hyperiux add dotted-trail` - Docs: https://vault.hyperiux.com/effects/cursor-effects/dotted-trail · Live demo: https://vault.hyperiux.com/demo/dotted-trail - Dependencies: none beyond React - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A pointer-reactive cursor effect for SaaS heroes, AI products, developer tools, creative portfolios, technical landing pages, and interactive editorial sections where the background should respond without stealing the interface. Best used for: - SaaS, AI, developer-tool, cyber, and infrastructure landing pages. - Hero backgrounds where interaction should feel technical but lightweight. - Product intros that need ambient motion around a stable headline. - Creative portfolio sections where pointer movement can add tactility. - Editorial or campaign pages where a dotted field supports the visual system. - Dark or light technical layouts where a glow trail can create controlled depth. Not for: Not for dense dashboards, checkout flows, forms, documentation, legal pages, pricing tables, or sections where users need quiet utility. Not for mobile-first experiences that cannot use pointer proximity meaningfully. Not for pages already overloaded with particles, shaders, video backgrounds, and scroll effects. A cursor trail should add signal, not join the motion committee and start voting against readability. Accessibility and mobile: Dotted Trail is decorative. It should not communicate essential information, hide text, or interfere with interaction. On touch devices, disable the pointer trail, show a static dotted field, or use a very subtle non-interactive background. For reduced motion, remove the moving trail and render a static dot texture or calm background state. Maintain sufficient contrast between text and the glowing layer. The trail should never pass over copy in a way that reduces readability. Performance budget: Keep the dot field lightweight, limit blur size, throttle pointer work with requestAnimationFrame , and avoid React state updates on every pointer move. Store fast-changing pointer values in refs where possible. Pause or disable the effect when the section is offscreen. Disable or simplify it on touch devices. If using Canvas, cap device pixel ratio and avoid redrawing more than necessary. The effect should feel immediate without making the browser work like it is rendering a nebula for every mouse move. Common mistakes: - Putting the trail layer above clickable elements. - Making the glow too bright behind text. - Updating React state on every pointer move. - Using too many dots or excessive blur. - Forgetting to disable the effect on touch devices. - Treating the dotted trail as meaningful content instead of decoration. - Running the effect continuously when the section is not visible. Props: - `colorA` (color, default "#ff4fd8"): Core color at the cursor. - `colorB` (color, default "#8b5cf6"): Outer color the blend runs toward. - `backgroundColor` (color, default "#ffffff"): Page color behind the grid. - `dotColor` (color, default "#d1d1d1"): Dot color at rest. - `activeDotColor` (color, default "#ffffff"): Dot color under the trail. - `headRadius` (number, default 80): Radius of the blob at the cursor. - `glowRadius` (number, default 300): Reach of the soft glow around the cursor. - `followSpeed` (number, default 0.22): How quickly the trail chases the cursor. - `trailLength` (number, default 18): How many nodes the tail trails behind. - `fadeOnIdle` (boolean, default true): Fade the cursor out when it rests. - `idleDelay` (number, default 100): Stillness before the fade starts, ms. - `idleFade` (number, default 1100): How long the fade takes, ms. - `rimInner` (number, default 2.1): Where the blend starts, inside the shape. - `rimOuter` (number, default 1.5): Where the blend finishes, past the edge. - `edgeDesaturate` (number, default 0.3): Pulls the fading edge back toward colorA. - `edgeDesaturateSpan` (number, default 2.1): Band width that desaturation acts over. - `tailTilt` (number, default 0.18): Extra drift toward colorB along the tail. - `dotSpacing` (number, default 34): Distance between dots in the grid. - `dotRadius` (number, default 1.2): Radius of an idle dot. Usage: ```jsx import DottedTrail from '@/components/effects/dotted-trail' const page = () => { return ( <> ) } ``` Related: Colorful Cursor Aura, Noise Ripple Cursor, Pixel Bloom Cursor ### Fish Eye Cursor - Slug: `fish-eye` · Tier: Pro · Category: Cursor Effects - Install: `npx hyperiux add fish-eye` - Docs: https://vault.hyperiux.com/effects/cursor-effects/fish-eye · Live demo: https://vault.hyperiux.com/demo/fish-eye - Dependencies: @react-three/drei, @react-three/fiber, three - Tags: Drei, React Three Fiber, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A cursor magnification effect that distorts or enlarges nearby imagery for galleries, portfolios, and visual product sections. Best used for: - Image-led portfolios where hover can magnify optional visual detail. - Galleries where inspection is useful but the same content still works without a pointer. - Fish Eye Cursor gives pointer movement a brand role without hiding core controls or content. Not for: Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere. Accessibility and mobile: Disable on coarse pointers and preserve normal touch behavior. Cursor-only reveals must have visible or tap-accessible alternatives. Performance budget: Use one cursor layer, throttle movement with requestAnimationFrame, avoid full-screen filter effects, and disable Fish Eye Cursor on coarse pointers. Common mistakes: - Letting Fish Eye Cursor cover focus rings or clickable controls. - Forgetting to disable the effect on coarse pointers. - Hiding useful content behind mouse-only movement. Props: - `bulgeEffect` (number, default 1): Strength of the fish-eye bulge distortion. - `duration` (number, default 0.125): Smoothing duration for bulge strength changes. - `smoothness` (number, default 0.083): Cursor-follow smoothing duration. - `mouseInteractive` (boolean, default true): Enables cursor-driven fish-eye distortion. Usage: ```jsx import FishEye from '@/components/effects/fish-eye' export default function page() { return ( <>
) } ``` Related: Milky Way, Coffee Bean Cursor, Grid Lift, Interactive Arrows, Gooey Counter ### Full Screen Crosshair - Slug: `full-screen-crosshair` · Tier: Pro · Category: Cursor Effects - Install: `npx hyperiux add full-screen-crosshair` - Docs: https://vault.hyperiux.com/effects/cursor-effects/full-screen-crosshair · Live demo: https://vault.hyperiux.com/demo/full-screen-crosshair - Dependencies: none beyond React - Tags: Mouse tracking - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). Turn pointer movement into a precise viewport-wide tracking layer for technical, cyber, and experimental desktop experiences. Best used for: - Technical, cyber, AI, and experimental homepages where pointer tracking supports the brand mood. - Desktop hero sections that can carry a full-screen visual cursor layer. - Interactive pages where the crosshair can vanish without removing content or control. Not for: Not for dashboards, checkout, forms, editors, documentation, or mobile-first routes where native cursor and text selection matter more. Not for pages where the crosshair sits above links, inputs, modals, or focus states. Accessibility and mobile: Disable on coarse pointers. Keep native touch behavior. Preserve visible focus states, text selection, and click targets. Reduced-motion users should get the normal cursor without tracking lines. Performance budget: Use a single overlay layer, update position with requestAnimationFrame, avoid layout reads on every pointer move, and remove listeners on unmount. Common mistakes: - Placing the crosshair above clickable UI. - Forgetting to disable the effect on touch devices. - Letting coordinate or line motion distract from the CTA. Props: - `color` (color, default "#000000"): Crosshair line and center color. - `centerContent` (string, default "•"): Text or symbol shown at the cursor center. - `hideNativeCursor` (boolean, default true): Hides the system cursor while the crosshair is active. - `gap` (number, default 20): Gap around the center symbol. - `thickness` (number, default 1): Line thickness in pixels. - `centerSize` (number, default 24): Center symbol size in pixels. - `smooth` (boolean, default true): Enables smoothed cursor tracking. - `lerpFactor` (number, default 0.14): Controls cursor smoothing speed. Usage: ```jsx import FullScreenCrosshair from "@/components/effects/full-screen-crosshair"; export default function Page() { return (
); } ``` Related: Fractal Glass, Animated Form, Fish Eye Cursor, Expanding Navbar ### Inertia Image - Slug: `inertia-img` · Tier: Pro · Category: Cursor Effects - Install: `npx hyperiux add inertia-img` - Docs: https://vault.hyperiux.com/effects/cursor-effects/inertia-img · Live demo: https://vault.hyperiux.com/demo/inertia-img - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A weighted image-follow cursor effect where preview visuals trail the pointer with delayed motion. Best used for: - Portfolio indexes where preview images can follow movement with physical weight. - Desktop browsing moments where the trail previews work without replacing project cards. - Inertia Image gives pointer movement a brand role without hiding core controls or content. Not for: Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere. Accessibility and mobile: Switch it off for coarse pointers and leave touch native; anything revealed by the cursor needs a visible or tap-accessible alternative. Performance budget: Use one cursor layer, throttle movement with requestAnimationFrame, avoid full-screen filter effects, and disable Inertia Image on coarse pointers. Common mistakes: - Letting Inertia Image cover focus rings or clickable controls. - Forgetting to disable the effect on coarse pointers. - Hiding useful content behind mouse-only movement. Props: - `strength` (number, default 1): Pointer inertia velocity multiplier. - `rotation` (number, default 0): Maximum image rotation while moving. - `scale` (number, default 1): Hover scale applied to images. - `duration` (number, default 0.4): Motion smoothing duration. Usage: ```jsx import InertiaImage from "@/components/effects/inertia-img"; const Page = () => { return ( <> ); }; export default Page; ``` Related: Hover Stack, Curved Plane, Coffee Bean Cursor, Sticky Content Wrapper, Zoom Slider ### Interactive Arrows - Slug: `interactive-arrows` · Tier: Pro · Category: Cursor Effects - Install: `npx hyperiux add interactive-arrows` - Docs: https://vault.hyperiux.com/effects/cursor-effects/interactive-arrows · Live demo: https://vault.hyperiux.com/demo/interactive-arrows - Dependencies: none beyond React - Tags: Canvas - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A pointer-reactive arrow effect that responds to cursor direction for guided galleries, campaign sections, and playful browsing moments. Best used for: - Galleries and case-study indexes where pointer direction can reinforce browsing intent. - Desktop interactions that still keep visible controls, links, and keyboard paths intact. - Interactive Arrows gives pointer movement a brand role without hiding core controls or content. Not for: Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere. Accessibility and mobile: Turn the effect off on touch and keep native gestures intact, and give any cursor-only reveal a visible or tappable alternative. Performance budget: Use one cursor layer, throttle movement with requestAnimationFrame, avoid full-screen filter effects, and disable Interactive Arrows on coarse pointers. Common mistakes: - Letting Interactive Arrows cover focus rings or clickable controls. - Forgetting to disable the effect on coarse pointers. - Hiding useful content behind mouse-only movement. Props: - `arrowCount` (number, default 50): Number of arrows rendered in the field. - `arrowColor` (string, default "#000000"): Arrow stroke or fill color. - `activeColor` (string, default "#000000"): Arrow color near the pointer. - `reactionRadius` (number, default 30): Pointer radius that rotates or highlights arrows. - `stiffness` (number, default 0.12): How tightly arrows track the pointer. Higher is stiffer and snappier, lower is looser and smoother. Usage: ```jsx import InteractiveArrows from "@/components/effects/interactive-arrows"; const Page = () => { return ( <>
Drift your cursor inside the canvas - the arrows will skitter, point and follow across every version.
{/* Mobile */}
{/* Top */}

Desktop Experience

{/* Bottom */}

Interactive
Arrows

Open on desktop to experience this effect

); }; export default Page; ``` Related: Colorful Cursor Aura, Text Convergence, Blur Text, Butterfly Trail Cursor, Dither Canvas ### Liquid Glass Cursor - Slug: `liquid-glass-cursor` · Tier: Free · Category: Cursor Effects - Install: `npx hyperiux add liquid-glass-cursor` - Docs: https://vault.hyperiux.com/effects/cursor-effects/liquid-glass-cursor · Live demo: https://vault.hyperiux.com/demo/liquid-glass-cursor - Dependencies: motion - Tags: Motion - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A premium cursor lens effect that bends the page surface under the pointer for agency homepages, portfolios, and launch pages. Best used for: - Premium homepages where a glass lens can become the first brand interaction. - Desktop hero sections where the cursor layer sits below CTAs, modals, and focus states. - Liquid Glass Cursor gives pointer movement a brand role without hiding core controls or content. Not for: Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere. Accessibility and mobile: Disable on coarse pointers and preserve normal touch behavior. Cursor-only reveals must have visible or tap-accessible alternatives. Performance budget: Use one cursor layer, throttle movement with requestAnimationFrame, avoid full-screen filter effects, and disable Liquid Glass Cursor on coarse pointers. Common mistakes: - Letting Liquid Glass Cursor cover focus rings or clickable controls. - Forgetting to disable the effect on coarse pointers. - Hiding useful content behind mouse-only movement. Props: - `size` (number, default 217): Diameter of the lens in pixels. - `magnification` (number, default 1.06): Zoom level applied to the content copy under the lens. - `textHoverSize` (number, default 107): Lens diameter when hovering a data-cursor="text" target. - `maxButtonWidth` (number, default 260): Lens width when hovering a data-cursor="button" target. - `maxButtonHeight` (number, default 110): Lens height when hovering a data-cursor="button" target. - `distortion` (number, default 36): SVG displacement strength for the glass refraction. - `aberration` (number, default 0.2): Chromatic aberration amount - how far the R/G/B channels split at the rim. Usage: ```jsx import LiquidGlassCursor from '@/components/effects/liquid-glass-cursor' const page = () => { return ( <> ) } ``` Related: Draggable Marquee, Gooey Counter ### Magnetic Image Trail - Slug: `magnetic-image-trail` · Tier: Pro · Category: Cursor Effects - Install: `npx hyperiux add magnetic-image-trail` - Docs: https://vault.hyperiux.com/effects/cursor-effects/magnetic-image-trail · Live demo: https://vault.hyperiux.com/demo/magnetic-image-trail - Dependencies: none beyond React - Tags: Canvas - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). An image trail cursor effect that pulls project visuals toward pointer movement for portfolios, studio pages, and work indexes. Best used for: - Portfolio and studio pages where movement should preview work before the click. - Project indexes where trailing imagery adds memory without replacing the actual list. - Magnetic Image Trail gives pointer movement a brand role without hiding core controls or content. Not for: Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere. Accessibility and mobile: Switch it off for coarse pointers and leave touch native; anything revealed by the cursor needs a visible or tap-accessible alternative. Performance budget: Use one cursor layer, throttle movement with requestAnimationFrame, avoid full-screen filter effects, and disable Magnetic Image Trail on coarse pointers. Common mistakes: - Letting Magnetic Image Trail cover focus rings or clickable controls. - Forgetting to disable the effect on coarse pointers. - Hiding useful content behind mouse-only movement. Props: - `trailLength` (number, default 18): Maximum visible images in the trail. - `magnetStrength` (number, default 1): Strength of magnetic pull, speed boost, and directional push. - `scaleIn` (number, default 0.06): Minimum scale for images entering and leaving the center path. - `scaleOut` (number, default 1.48): Maximum directional scale for images pushed away by movement. - `lerp` (number, default 0.18): Pointer smoothing amount; higher values follow faster. - `size` (number, default 1): Overall image size multiplier. Usage: ```jsx import MagneticImageTrail from '@/components/effects/magnetic-image-trail' const page = () => { return ( <> ) } ``` Related: Butterfly Trail Cursor, Character Trail, Coffee Bean Cursor, Colorful Cursor Aura ### Noise Ripple Cursor - Slug: `noise-ripple-cursor` · Tier: Pro · Category: Cursor Effects - Install: `npx hyperiux add noise-ripple-cursor` - Docs: https://vault.hyperiux.com/effects/cursor-effects/noise-ripple-cursor · Live demo: https://vault.hyperiux.com/demo/noise-ripple-cursor - Dependencies: three - Tags: Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A cursor distortion effect that sends subtle noise ripples from the pointer for experimental, AI, cyber, and technical brand pages. Best used for: - Cyber, AI, and experimental pages where pointer motion can disturb the surface like signal. - Short desktop hero moments where ripple texture supports tone without owning meaning. - Noise Ripple Cursor gives pointer movement a brand role without hiding core controls or content. Not for: Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere. Accessibility and mobile: Turn the effect off on touch and keep native gestures intact, and give any cursor-only reveal a visible or tappable alternative. Performance budget: Use one cursor layer, throttle movement with requestAnimationFrame, avoid full-screen filter effects, and disable Noise Ripple Cursor on coarse pointers. Common mistakes: - Letting Noise Ripple Cursor cover focus rings or clickable controls. - Forgetting to disable the effect on coarse pointers. - Hiding useful content behind mouse-only movement. Props: - `overlayColor` (color, default "#1825AA"): Overlay and ripple shader color. - `pixelSize` (number, default 0.5): Pixel block size used by the dither shader. - `lerp` (number, default 0.2): Mouse smoothing amount for the ripple source. - `distortion` (number, default 0.5): Strength of the image UV distortion. - `radius` (number, default 0.08): Radius of the cursor ripple influence. - `imageSrc` (string, default "https://picsum.photos/seed/h15/1600/1200"): Background image URL, also used as the shader texture (needs CORS). Usage: ```jsx import NoiseRippleCursor from "@/components/effects/noise-ripple-cursor"; export default function page() { return ( <> ); } ``` Related: Butterfly Trail Cursor, Character Trail, Coffee Bean Cursor, Colorful Cursor Aura ### Phantom Image Trail - Slug: `phantom-image-trail` · Tier: Free · Category: Cursor Effects - Install: `npx hyperiux add phantom-image-trail` - Docs: https://vault.hyperiux.com/effects/cursor-effects/phantom-image-trail · Live demo: https://vault.hyperiux.com/demo/phantom-image-trail - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A fading image trail cursor effect where ghosted visuals follow the pointer and dissolve across the page. Best used for: - Creative portfolios where ghosted previews can build momentum before case-study selection. - Image-led homepages where motion creates memory while the work remains directly accessible. - Phantom Image Trail gives pointer movement a brand role without hiding core controls or content. Not for: Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere. Accessibility and mobile: Disable on coarse pointers and preserve normal touch behavior. Cursor-only reveals must have visible or tap-accessible alternatives. Performance budget: Use one cursor layer, throttle movement with requestAnimationFrame, avoid full-screen filter effects, and disable Phantom Image Trail on coarse pointers. Common mistakes: - Letting Phantom Image Trail cover focus rings or clickable controls. - Forgetting to disable the effect on coarse pointers. - Hiding useful content behind mouse-only movement. Props: - `imageMultiplier` (number, default 3): Sets how many copies of the image set can be in flight. - `triggerDistance` (number, default 100): Distance the cursor must move before spawning a new image. - `lerpFactor` (number, default 0.1): Cursor smoothing factor. - `popOutDuration` (number, default 0.8): Image pop-in duration. - `fadeOutDuration` (number, default 0.5): Image fade-out duration. - `startScale` (number, default 0.2): Image starting scale. - `endScale` (number, default 1): Image settled scale. - `exitScale` (number, default 0): Image exit scale. - `enableRotation` (boolean, default true): Enables random image tilt. - `maxStartRotation` (number, default 35): Maximum starting tilt. - `maxExitRotation` (number, default 15): Maximum exit tilt. - `idleSpawn` (boolean, default false): Spawns images while the cursor rests. - `idleDelay` (number, default 300): Delay before idle spawning starts. - `idlePopOutMultiplier` (number, default 2.2): Multiplier for idle pop-in timing. - `idleFadeMultiplier` (number, default 1.8): Multiplier for idle fade-out timing. - `images` (object[]): Trail images as URL strings or { src, alt? } objects; empty falls back to built-in set. - `cursorOffsetX` (number, default -12): Horizontal offset of spawned images from the cursor, in pixels. - `cursorOffsetY` (number, default -12): Vertical offset of spawned images from the cursor, in pixels. Usage: ```jsx import PhantomImageTrail from "@/components/effects/phantom-image-trail"; const page = () => { return ( <>
); }; export default page; const images = [ { src: "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-11.jpg", alt: "Gradient 1" }, { src: "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-12.jpg", alt: "Gradient 2" }, { src: "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-13.jpg", alt: "Gradient 3" }, { src: "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-14.jpg", alt: "Gradient 4" }, { src: "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-15.jpg", alt: "Gradient 5" }, { src: "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-01.jpg", alt: "Gradient 6" }, { src: "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-02.jpg", alt: "Gradient 7" }, ]; ``` Related: Interactive Blur Reveal, Coffee Bean Cursor, Butterfly Trail Cursor, Colorful Cursor Aura ### Pixel Bloom Cursor - Slug: `pixel-bloom` · Tier: Pro · Category: Cursor Effects - Install: `npx hyperiux add pixel-bloom` - Docs: https://vault.hyperiux.com/effects/cursor-effects/pixel-bloom · Live demo: https://vault.hyperiux.com/demo/pixel-bloom - Dependencies: none beyond React - Tags: Canvas - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A digital cursor trail effect where pixel particles bloom from the pointer path for technical launches and proof-of-craft hero sections. Best used for: - Technical and launch pages where pointer movement can leave a crisp digital trace. - Desktop hero sections that benefit from pixel energy without hiding links or proof. - Pixel Bloom Cursor gives pointer movement a brand role without hiding core controls or content. Not for: Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere. Accessibility and mobile: Turn the effect off on touch and keep native gestures intact, and give any cursor-only reveal a visible or tappable alternative. Performance budget: Use one cursor layer, throttle movement with requestAnimationFrame, avoid full-screen filter effects, and disable Pixel Bloom Cursor on coarse pointers. Common mistakes: - Letting Pixel Bloom Cursor cover focus rings or clickable controls. - Forgetting to disable the effect on coarse pointers. - Hiding useful content behind mouse-only movement. Props: - `gridSize` (number, default 35): Pixel grid cell size. - `effectRadius` (number, default 40): Radius of the cursor bloom. - `maxTrailLength` (number, default 8): Maximum number of active trail points. - `cellLifetime` (number, default 100): How long each pixel cell remains active. - `src` (string, default "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4"): Video or image URL drawn under the pixel bloom grid. - `type` (enum, default "video"): Media kind for src; any value other than video renders an image. Usage: ```jsx import PixelBloom from "@/components/effects/pixel-bloom"; const page = () => { return ( <>
) } ``` Related: Butterfly Trail Cursor, Character Trail, Coffee Bean Cursor, Colorful Cursor Aura ### Pixelated Image Effect - Slug: `pixelated-image-effect` · Tier: Free · Category: Cursor Effects - Install: `npx hyperiux add pixelated-image-effect` - Docs: https://vault.hyperiux.com/effects/cursor-effects/pixelated-image-effect · Live demo: https://vault.hyperiux.com/demo/pixelated-image-effect - Dependencies: none beyond React - Tags: Canvas - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A cursor or hover-based image effect that pixelates, reveals, or distorts visuals for digital, retro, gaming, and experimental interfaces. Best used for: - Digital, gaming, and retro-technical pages where pixel texture belongs to the visual system. - Portfolio previews where pixelation adds character without obscuring the final image. - Pixelated Image gives pointer movement a brand role without hiding core controls or content. Not for: Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere. Accessibility and mobile: Switch it off for coarse pointers and leave touch native; anything revealed by the cursor needs a visible or tap-accessible alternative. Performance budget: Use one cursor layer, throttle movement with requestAnimationFrame, avoid full-screen filter effects, and disable Pixelated Image on coarse pointers. Common mistakes: - Letting Pixelated Image cover focus rings or clickable controls. - Forgetting to disable the effect on coarse pointers. - Hiding useful content behind mouse-only movement. Props: - `src` (string, default "https://picsum.photos/seed/v02/1600/1200"): Image source URL. - `pixelSize` (number, default 16): Baseline pixel size for the SVG pixelation filter. - `duration` (number, default 0.25): Smoothing duration for pixel-size changes. Usage: ```jsx import PixelatedImageEffect from "@/components/effects/pixelated-image-effect"; export default function Page() { return ( <> ); } ``` Related: Coffee Bean Cursor, Mouse Pixelation, Interactive Blur Reveal ### Rope Cursor - Slug: `rope-cursor` · Tier: Pro · Category: Cursor Effects - Install: `npx hyperiux add rope-cursor` - Docs: https://vault.hyperiux.com/effects/cursor-effects/rope-cursor · Live demo: https://vault.hyperiux.com/demo/rope-cursor - Dependencies: none beyond React - Tags: SVG path - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). An elastic cursor effect that draws a delayed rope-like line behind the pointer for playful, high-craft desktop experiences. Best used for: - Playful studio or campaign pages where delayed pointer weight matches the brand tone. - Desktop-only moments where the line can vanish on touch without changing the task. - Rope Cursor gives pointer movement a brand role without hiding core controls or content. Not for: Not for dashboards, checkout, forms, dense product UIs, or any flow where precision beats atmosphere. Accessibility and mobile: Turn the effect off on touch and keep native gestures intact, and give any cursor-only reveal a visible or tappable alternative. Performance budget: Use one cursor layer, throttle movement with requestAnimationFrame, avoid full-screen filter effects, and disable Rope Cursor on coarse pointers. Common mistakes: - Letting Rope Cursor cover focus rings or clickable controls. - Forgetting to disable the effect on coarse pointers. - Hiding useful content behind mouse-only movement. Props: - `ropeColor` (color, default "#bda985"): Stroke color of the rope. - `ropeWidth` (number, default 2): Stroke width of the rope. - `ropeOpacity` (number, default 0.6): Opacity of the rope stroke. - `segmentLength` (number, default 0): Distance allowed between rope segments. - `segmentCount` (number, default 8): Number of points used to draw the rope. Usage: ```jsx import RopeCursor from "@/components/effects/rope-cursor"; export default function page() { return ( <>
); } ``` Related: Grid Scale, Progressive Bloom Valley, Draggable Canvas, File Encryption ## Page Transitions (10) ### Aperture Transition - Slug: `aperture-transition` · Tier: Pro · Category: Page Transitions - Install: `npx hyperiux add aperture-transition` - Docs: https://vault.hyperiux.com/effects/page-transitions/aperture-transition · Live demo: https://vault.hyperiux.com/demo/aperture-transition - Dependencies: gsap, next-transition-router - Tags: GSAP, next-transition-router - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). An iris-style page transition that opens and closes routes through a focused aperture for photography, portfolio, film, and visual brand sites. Best used for: - Photography, film, portfolio, and campaign sites where aperture or lens language fits the brand. - Visual route changes where a circular reveal feels more appropriate than a block, slice, or pixel transition. - Small route trees where the transition appears often enough to create identity but not so often that it becomes friction. Not for: Not for apps, docs, checkout, search, dashboards, dense product flows, or pages where users need instant repeated navigation. Not for brands where the aperture metaphor feels decorative rather than connected to the content. Accessibility and mobile: Move focus to the destination main region or heading after navigation. On mobile, simplify the aperture movement and avoid large full-screen motion that slows orientation. Reduced-motion users should get instant navigation or a brief fade. Performance budget: Keep duration short, animate masks or transforms with restraint, avoid artificial route delays, and do not block interactivity once the destination is ready. Common mistakes: - Treating the aperture like a fake loading screen. - Making the mask too slow or too theatrical for routine navigation. - Forgetting focus restoration after the route changes. - Using aperture motion on every tiny interaction instead of true route changes. Props: - `scale` (number, default 0.82): Amount the whole screen shrinks toward its center during the leave phase. - `duration` (number, default 0.6): Duration of the leave shrink and reveal/expand phases. - `revealDirection` (string, default "bottom"): Edge the incoming page's aperture reveal expands from. Usage: ```jsx import ApertureTransition from "@/components/aperture-transition"; import React from "react"; export default function layout({ children }) { return ( {children} ); } ``` Related: Ascend Transition, Block Transition, Page Flip Transition, Depth Shift Transition ### Ascend Transition - Slug: `ascend-transition` · Tier: Pro · Category: Page Transitions - Install: `npx hyperiux add ascend-transition` - Docs: https://vault.hyperiux.com/effects/page-transitions/ascend-transition · Live demo: https://vault.hyperiux.com/demo/ascend-transition - Dependencies: gsap, next-transition-router - Tags: GSAP, next-transition-router - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A vertical page transition that lifts one route into the next for brand sites, campaign pages, and editorial journeys that need a clean upward motion. Best used for: - Brand and portfolio sites where route changes should feel clean and upward. - Editorial or campaign routes with a vertical visual system. - Launch pages where transition motion should feel light rather than aggressive. Not for: Not for long documentation, dashboards, checkout flows, product apps, or any route where users navigate frequently and expect instant response. Not for pages where upward motion would be confused with normal scrolling. Accessibility and mobile: Move focus to the destination main region or heading after navigation. On mobile, reduce travel distance so the transition does not feel like forced scroll. Reduced-motion users should get instant navigation or a short fade. Performance budget: Use transform and opacity, keep duration short, avoid forcing layout during route change, and clean up route listeners or animation timelines after completion. Common mistakes: - Making the route lift feel like scroll-jacking. - Running the transition after the destination page is already usable. - Forgetting to restore focus after navigation. - Using large vertical travel on small mobile screens. Props: - `bgColor` (string, default "#ffffff"): Background color of the covering panel that rises and reveals the new page. - `duration` (number, default 0.9): Base duration of the rise/reveal phase; related scale-up and fade timings scale with it. Usage: ```jsx import AscendTransition from "@/components/ascend-transition"; import React from "react"; export default function layout({ children }) { return ( {children} ); } ``` Related: Block Transition, Chess Grid Transition, Page Flip Transition ### Block Transition - Slug: `block-transition` · Tier: Free · Category: Page Transitions - Install: `npx hyperiux add block-transition` - Docs: https://vault.hyperiux.com/effects/page-transitions/block-transition · Live demo: https://vault.hyperiux.com/demo/block-transition - Dependencies: gsap, next-transition-router - Tags: GSAP, next-transition-router - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A page transition effect that uses moving blocks or panels to cover, reveal, and connect route changes. Best used for: - Graphic brand sites where a fast cover-and-reveal cut can make navigation feel intentional. - Small route trees where transition timing stays short and destination focus is restored. - Block Transition turns route change into a brief brand moment without delaying orientation. Not for: Not for apps, docs, checkout, search, or frequently navigated product flows where delay harms completion. Accessibility and mobile: Move focus to the destination main region after navigation. On mobile and reduced motion, use instant transitions or short fades. Performance budget: Keep duration short, avoid artificial route delays, and do not block interactivity after the destination route is ready. Common mistakes: - Using Block Transition as a fake loading delay. - Forgetting focus restoration after navigation. - Running full-screen motion for reduced-motion users. Props: - `enableContentShift` (boolean, default false): Adds content scale/blur during the transition. - `rows` (number, default 5): Number of block rows. - `color` (string, default "#000000"): Transition block color. - `duration` (number, default 1): Duration multiplier for the cover and reveal block animations. Usage: ```jsx import React from 'react' import BlockTransition from '@/components/effects/block-transition' export default function layout({ children }) { return ( {children} ) } ``` Related: Rope Cursor, Dotted Grid Background, Parallax Slider, Liquid Glass Cursor, Lines Loader ### Chess Grid Transition - Slug: `chess-grid-transition` · Tier: Free · Category: Page Transitions - Install: `npx hyperiux add chess-grid-transition` - Docs: https://vault.hyperiux.com/effects/page-transitions/chess-grid-transition · Live demo: https://vault.hyperiux.com/demo/chess-grid-transition - Dependencies: gsap, next-transition-router - Tags: GSAP, next-transition-router - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A grid-based page transition that closes and opens routes through a patterned checker-style reveal. Best used for: - Campaign or portfolio sites where grid geometry already belongs to the visual language. - Simple navigation flows that can use a patterned route cut without confusing orientation. - Chess Grid Transition turns route change into a brief brand moment without delaying orientation. Not for: Not for apps, docs, checkout, search, or frequently navigated product flows where delay harms completion. Accessibility and mobile: Move focus to the destination main region after navigation. On mobile and reduced motion, use instant transitions or short fades. Performance budget: Keep duration short, avoid artificial route delays, and do not block interactivity after the destination route is ready. Common mistakes: - Using Chess Grid Transition as fake loading delay. - Forgetting focus restoration after navigation. - Running full-screen motion for reduced-motion users. Props: - `duration` (number, default 1): Duration multiplier for the chess grid sweep. - `gridSize` (number, default 8): Grid density used to derive transition columns and responsive rows. - `color` (string, default "#ff5f00"): Chess grid block color. Usage: ```jsx import ChessGridTransition from "@/components/effects/chess-grid-transition/ChessGridTransition"; export default function layout({ children }) { return ( {children} ); } ``` Related: Mouse Pixelation, Scroll Distortion, Infinite Perspective Slider, Gooey Counter ### Depth Shift Transition - Slug: `depth-shift-transition` · Tier: Pro · Category: Page Transitions - Install: `npx hyperiux add depth-shift-transition` - Docs: https://vault.hyperiux.com/effects/page-transitions/depth-shift-transition · Live demo: https://vault.hyperiux.com/demo/depth-shift-transition - Dependencies: gsap, next-transition-router - Tags: GSAP, next-transition-router - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A layered route transition that moves pages through perspective, giving portfolios and brand sites a spatial handoff without a full 3D scene. Best used for: - Portfolio and agency websites where route changes should feel spatial and crafted. - Campaign pages where the transition can reinforce a premium visual system. - Editorial journeys where depth helps one page hand off to the next. Not for: Not for dashboards, docs, checkout, search, pricing comparison flows, or routes where navigation speed is the feature. Not for pages where perspective movement would make users lose their place. Accessibility and mobile: Move focus to the destination main region or heading after navigation. On mobile, reduce perspective distance and avoid heavy motion that makes the route feel unstable. Reduced-motion users should get instant navigation or a brief fade. Performance budget: Keep the transition short, animate transform and opacity, avoid layout reads during route change, and clean up listeners or timelines after navigation completes. Depth should come from composited layers, not from expensive layout work. Common mistakes: - Using depth motion as fake loading delay. - Letting the previous page remain visually dominant after the destination is ready. - Forgetting focus restoration after the route changes. - Making the perspective shift so strong that the destination feels hard to track. Props: - `bgColor` (string, default "#0b0b0c"): Background color behind the transitioning pages. - `duration` (number, default 0.65): Duration of the exit phase. Enter timing scales with this value. - `exitOffsetX` (number, default 20): Horizontal offset applied to the outgoing page during desktop transitions. - `exitOffsetY` (number, default 30): Vertical offset applied to the outgoing page during desktop transitions. - `exitRotate` (number, default 3): Rotation applied to the outgoing page as it recedes. Usage: ```jsx import DepthShiftTransition from "@/components/depth-shift-transition"; import React from "react"; export default function layout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` Related: Block Transition, Chess Grid Transition, Page Flip Transition, SVG Brush Transition ### Page Flip Transition - Slug: `page-flip-transition` · Tier: Pro · Category: Page Transitions - Install: `npx hyperiux add page-flip-transition` - Docs: https://vault.hyperiux.com/effects/page-transitions/page-flip-transition · Live demo: https://vault.hyperiux.com/demo/page-flip-transition - Dependencies: gsap, next-transition-router - Tags: GSAP, next-transition-router - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). An editorial page transition that uses a page-turn metaphor for portfolios, stories, and brand-led navigation. Best used for: - Editorial and portfolio sites where a page metaphor fits the content model. - Low-frequency navigation moments where the flip supports continuity instead of delaying tasks. - Page Flip Transition turns route change into a brief brand moment without delaying orientation. Not for: Not for apps, docs, checkout, search, or frequently navigated product flows where delay harms completion. Accessibility and mobile: Move focus to the destination main region after navigation. On mobile and reduced motion, use instant transitions or short fades. Performance budget: Keep duration short, avoid artificial route delays, and do not block interactivity after the destination route is ready. Common mistakes: - Using Page Flip Transition as fake loading delay. - Forgetting focus restoration after navigation. - Running full-screen motion for reduced-motion users. Props: - `duration` (number, default 0.9): Page flip duration. - `bgColor` (string, default "#ff5f00"): Overlay background color. - `loaderColor` (string, default "#000000"): Color of the loading blocks shown during the flip. - `direction` ("left-to-right" | "right-to-left", default "left-to-right"): Direction the page flips across the screen. Usage: ```jsx import React from "react"; import FlipTransition from "@/components/effects/page-flip-transition"; export default function layout({ children }) { return ( {children} ); } ``` Related: Block Transition, Chess Grid Transition, Radial Slice Transition, Pixel Transition ### Pixel Transition - Slug: `pixel-transition` · Tier: Pro · Category: Page Transitions - Install: `npx hyperiux add pixel-transition` - Docs: https://vault.hyperiux.com/effects/page-transitions/pixel-transition · Live demo: https://vault.hyperiux.com/demo/pixel-transition - Dependencies: gsap, next-transition-router - Tags: GSAP, next-transition-router - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A pixel-dissolve page transition that breaks route changes into a crisp digital grid reveal. Best used for: - Technical, game-like, or retro-digital brands where the route change can dissolve into pixels. - Launch pages where a pixel cue supports tone while App Router focus stays predictable. - Pixel Transition turns route change into a brief brand moment without delaying orientation. Not for: Not for apps, docs, checkout, search, or frequently navigated product flows where delay harms completion. Accessibility and mobile: Move focus to the destination main region after navigation. On mobile and reduced motion, use instant transitions or short fades. Performance budget: Keep duration short, avoid artificial route delays, and do not block interactivity after the destination route is ready. Common mistakes: - Using Pixel Transition as fake loading delay. - Forgetting focus restoration after navigation. - Running full-screen motion for reduced-motion users. Props: - `cols` (number, default 30): Pixel grid columns. - `rows` (number, default 40): Pixel grid rows. - `pixelColor` (string, default "#111111"): Color used to draw each transition pixel. - `duration` (number, default 1): Duration multiplier for the leave and enter pixel sweeps. - `enableContentShift` (boolean, default false): Adds content scale/blur during the transition. Usage: ```jsx import PixelTransition from "@/components/effects/pixel-transition"; export default function layout({ children }) { return ( {children} ); } ``` Related: Block Transition, Chess Grid Transition, Page Flip Transition, Radial Slice Transition ### Radial Slice Transition - Slug: `radial-slice-transition` · Tier: Pro · Category: Page Transitions - Install: `npx hyperiux add radial-slice-transition` - Docs: https://vault.hyperiux.com/effects/page-transitions/radial-slice-transition · Live demo: https://vault.hyperiux.com/demo/radial-slice-transition - Dependencies: gsap, next-transition-router - Tags: GSAP, next-transition-router - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). Cut between routes with circular slices, giving brand and campaign navigation a sharp graphic handoff without manufacturing delay. Best used for: - Campaign and portfolio sites where radial motion matches the visual language. - Short route trees where navigation frequency is low enough for a designed cut. - Brand pages that need a transition with more edge than a fade but less weight than WebGL. Not for: Not for apps, docs, checkout, search, dashboards, or flows where fast navigation is the main feature. Not for routes where users bounce between pages repeatedly and would see the same slice too often. Accessibility and mobile: Restore focus to the destination main region or heading after navigation. On mobile and reduced motion, use instant navigation or a brief fade instead of full-screen radial movement. Performance budget: Keep duration short, avoid fake loading delays, animate transforms and masks with restraint, and do not block interactivity after the destination is ready. Common mistakes: - Using Radial Slice Transition as a fake preloader. - Letting the slice run after the next route is already usable. - Forgetting focus restoration after navigation. - Making the segments so complex that the transition feels heavier than the page. Props: - `duration` (number, default 4): Total duration of the radial slice transition. - `color` (string, default "#0F2854"): Radial slice overlay color. Usage: ```jsx import RadialSliceTransition from '@/components/effects/radial-slice-transition' export default function layout({ children }) { return ( {children} ) } ``` Related: Block Transition, Pixel Transition, Chess Grid Transition, Page Flip Transition, SVG Brush Transition ### SVG Brush Transition - Slug: `svg-brush-transition` · Tier: Pro · Category: Page Transitions - Install: `npx hyperiux add svg-brush-transition` - Docs: https://vault.hyperiux.com/effects/page-transitions/svg-brush-transition · Live demo: https://vault.hyperiux.com/demo/svg-brush-transition - Dependencies: gsap, next-transition-router - Tags: GSAP, next-transition-router - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). Guide route changes with drawn SVG linework, giving illustrated and editorial sites a crafted transition between pages. Best used for: - Illustrated brands where drawn linework already belongs to the design system. - Portfolio and editorial route changes that should feel crafted but brief. - Small navigation trees where the transition supports orientation instead of hiding latency. Not for: Not for apps, docs, checkout, search, dashboards, or product flows where navigation speed is the feature. Not for routes where visitors navigate repeatedly and would resent the same flourish every few seconds. Accessibility and mobile: Move focus to the destination main region or heading after navigation. Respect reduced-motion preferences with instant navigation or a short fade. On mobile, reduce mask complexity and avoid full-screen linework that delays orientation. Performance budget: Keep duration short, avoid artificial route delays, animate SVG properties with restraint, and do not block interactivity after the destination route is ready. A transition that overstays its welcome is just a branded door in the user’s face. Common mistakes: - Using SVG Brush Transition as fake loading delay. - Forgetting focus restoration after navigation. - Running full-screen motion for reduced-motion users. - Making the SVG linework too complex for a route change that should last under a second. Props: - `strokeColor` (string, default "#82A0FF"): SVG brush stroke color. - `duration` (number, default 1.5): Duration of the SVG brush draw and reveal animations. Usage: ```jsx import SVGBrushTransition from "@/components/effects/svg-brush-transition"; export default function layout({ children }) { return ( {children} ); } ``` Related: Block Transition, Chess Grid Transition, Page Flip Transition, Radial Slice Transition ### Sweep Lift Transition - Slug: `sweep-lift-transition` · Tier: Pro · Category: Page Transitions - Install: `npx hyperiux add sweep-lift-transition` - Docs: https://vault.hyperiux.com/effects/page-transitions/sweep-lift-transition · Live demo: https://vault.hyperiux.com/demo/sweep-lift-transition - Dependencies: gsap, next-transition-router - Tags: GSAP, next-transition-router - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A full-screen transition that softens the current view, lifts a new state into place, and makes the change feel deliberate without turning it into a loading screen. Best used for: - Portfolio and agency websites where route changes should feel soft and premium. - Campaign pages where a gradient sweep matches the visual direction. - Brand-led routes where navigation needs a subtle handoff rather than a hard cut. Not for: Not for dashboards, docs, checkout, search, forms, or product flows where fast repeated navigation matters more than motion. Not for routes where users bounce between pages frequently and would see the same sweep too often. Accessibility and mobile: Move focus to the destination main region or heading after navigation. On mobile, reduce travel distance and avoid heavy full-screen motion. Reduced-motion users should get instant navigation or a short fade. Performance budget: Keep duration short, animate transform and opacity, avoid layout reads during route change, and clean up listeners or timelines after completion. Use the sweep as a composited overlay, not as a layout-level interruption. Common mistakes: - Using Sweep Lift as a fake loading delay. - Letting the overlay stay after the destination is ready. - Forgetting focus restoration after navigation. - Making the sweep so soft that route change state becomes unclear. Props: - `bgColor` (string, default "#111111"): Background color behind the transitioning pages. - `duration` (number, default 1.3): Duration used by both the outgoing lift and incoming sweep reveal. Usage: ```jsx import React from 'react' import SweepLiftTransition from "@/components/sweep-lift-transition"; export default function layout({ children }) { return ( {children} ) } ``` Related: Block Transition, Chess Grid Transition, Page Flip Transition, SVG Brush Transition ## Loaders (3) ### Lines Loader - Slug: `lines-loader` · Tier: Pro · Category: Loaders - Install: `npx hyperiux add lines-loader` - Docs: https://vault.hyperiux.com/effects/loaders/lines-loader · Live demo: https://vault.hyperiux.com/demo/lines-loader - Dependencies: gsap, lucide-react - Tags: GSAP, Lucide - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A restrained line-based loader for short indeterminate waits, route latency, data loading, and lightweight product states. Best used for: - Short indeterminate waits where a quiet activity signal is clearer than fake progress. - Product flows where the loader should feel restrained and easy to replace with a skeleton. - Lines Loader makes real waiting visible without manufacturing delay. Not for: Not for fast pages, fake progress, manufactured waits, or loaders that hide usable content. Accessibility and mobile: Use aria-busy on loading regions and concise status text. On mobile and reduced motion, prefer static progress text or skeletons. Performance budget: Tie animation to real load state, clean up timers, and avoid blocking first paint. Common mistakes: - Using Lines Loader on a page that already loads quickly. - Faking determinate progress. - Announcing every animation frame to assistive technology. Props: - `duration` (number, default 1): Overall timeline duration multiplier. - `lineHeight` (number, default 1): Rendered height of each loader line in pixels. - `darkLineColor` (color, default "#ffffff"): Line color on the dark loader layer. - `lightLineColor` (color, default "#000000"): Line color on the light reveal layer. - `fadeOutDuration` (number, default 0.5): Duration of the line fade-out phases. Usage: ```jsx import LinesLoader from "@/components/effects/lines-loader"; export default function Page() { return ( <> ); } ``` Related: Circle Text Reveal, Card Drift, Rotation Slider, Chess Grid Transition ### Numeric Tunnel Loader - Slug: `numeric-tunnel` · Tier: Free · Category: Loaders - Install: `npx hyperiux add numeric-tunnel` - Docs: https://vault.hyperiux.com/effects/loaders/numeric-tunnel · Live demo: https://vault.hyperiux.com/demo/numeric-tunnel - Dependencies: @react-three/drei, @react-three/fiber, gsap, three - Tags: Drei, React Three Fiber, GSAP, Three.js - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A numeric intro loader that counts from 0 to 100 on a timer through a tunnel of WebGL digits, then warps away to reveal the content underneath. Best used for: - Short branded intros, such as a WebGL warm-up, where a timed count sets the tone without claiming real progress. - Technical launch flows where the loading moment can carry brand tone without lying. - Numeric Tunnel gives a brief wait a branded entrance; tune speed so it does not manufacture delay. Not for: Not for fast pages, fake progress, manufactured waits, or loaders that hide usable content. Accessibility and mobile: Use aria-busy on loading regions and concise status text. On mobile and reduced motion, prefer static progress text or skeletons. Performance budget: Keep the timed count short, clean up timers, and avoid blocking first paint. Common mistakes: - Using Numeric Tunnel on a page that already loads quickly. - Faking determinate progress. - Announcing every animation frame to assistive technology. Props: - `digitCount` (number, default 50): Number of digits rendered in the tunnel. - `speed` (number, default 1): Forward motion speed. - `depth` (number, default 900): Visual tunnel depth. - `textColor` (string, default "#ffffff"): Digit color. - `backgroundColor` (string, default "#000000"): Tunnel background color. Usage: ```jsx import NumericTunnel from '@/components/effects/numeric-tunnel' const page = () => { return ( ) } ``` Related: Lines Loader, Stack Loader, Dither Canvas ### Stack Loader - Slug: `stack-loader` · Tier: Free · Category: Loaders - Install: `npx hyperiux add stack-loader` - Docs: https://vault.hyperiux.com/effects/loaders/stack-loader · Live demo: https://vault.hyperiux.com/demo/stack-loader - Dependencies: gsap - Tags: GSAP - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A stacked-panel loader that covers real route, asset, upload, or WebGL waits with branded motion tied to actual loading state. Best used for: - Route and asset waits where a short branded cover is honest and state-driven. - Experiences where the loader disappears as soon as the real task completes. - Stack Loader makes real waiting visible without manufacturing delay. Not for: Not for fast pages, fake progress, manufactured waits, or loaders that hide usable content. Accessibility and mobile: Use aria-busy on loading regions and concise status text. On mobile and reduced motion, prefer static progress text or skeletons. Performance budget: Tie animation to real load state, clean up timers, and avoid blocking first paint. Common mistakes: - Using Stack Loader on a page that already loads quickly. - Faking determinate progress. - Announcing every animation frame to assistive technology. Props: - `imageSize` (number, default 1): Scale multiplier for the loader image stack. - `duration` (number, default 1): Global duration multiplier for the loader animation. - `fadeOutDuration` (number, default 0.8): Duration of the final image and loader fade-out. - `backgroundColor` (string, default "#fcfcfc"): Loader background color. Usage: ```jsx import StackLoader from "@/components/effects/stack-loader"; export default function Page() { return ; } ``` Related: Lines Loader, Animated Toggle ## WebGL & 3D Effects (17) ### 3D Portfolio Slider - Slug: `3d-portfolio-slider` · Tier: Pro · Category: WebGL & 3D Effects - Install: `npx hyperiux add 3d-portfolio-slider` - Docs: https://vault.hyperiux.com/effects/webgl-effects/3d-portfolio-slider · Live demo: https://vault.hyperiux.com/demo/3d-portfolio-slider - Dependencies: gsap, lenis, three - Tags: GSAP, Lenis, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A spatial portfolio slider that gives selected projects depth, movement, and presence as users scroll through the page. Best used for: - Studio portfolios where scroll-linked depth makes selected work feel spatial rather than listed. - Agency and studio portfolios where the work should feel dimensional, not listed. - Makes agency and studio portfolios feel spatially considered rather than just well-photographed. Not for: Not for large portfolio archives where visitors need to compare many projects or open work from a simple grid. Not for low-power-first audiences unless a static project grid is the primary fallback. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Using aggressive perspective that distorts the work instead of framing it. - Letting the spatial lane replace a portfolio grid where visitors need fast comparison. - Testing with placeholder images instead of real project crops and aspect ratios. Props: - `zoomFactor` (number, default 1): Multiplier on the shader zoom applied to planes as they swing away from center. - `scrollSpeed` (number, default 0.01): How fast wheel/scroll input moves the carousel. - `showCaption` (boolean, default true): Shows the project caption text overlay. Usage: ```jsx import PortfolioSlider3D from '@/components/effects/3d-portfolio-slider' const page = () => { return ( <> ) } ``` Related: Scroll Stack, Parallax Gallery, Horizontal Feature Reveal, Infinite Perspective Slider ### Book Flip - Slug: `book-flip` · Tier: Pro · Category: WebGL & 3D Effects - Install: `npx hyperiux add book-flip` - Docs: https://vault.hyperiux.com/effects/webgl-effects/book-flip · Live demo: https://vault.hyperiux.com/demo/book-flip - Dependencies: @react-three/drei, @react-three/fiber, maath, three - Tags: Drei, React Three Fiber, maath, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). Present stories, portfolios, or lookbooks as a tactile page-turn experience where each screen feels like part of a designed object. Best used for: - Editorial portfolios, campaign lookbooks, and visual stories with a natural page metaphor. - Brand books, manifestos, or case-study sequences where turning pages supports the concept. - Short, curated narratives where each page earns its place. Not for: Not for documentation, pricing, forms, dashboards, long text, or anything that needs fast scanning. Not for mobile-first pages unless the book collapses into a clear stacked or swipeable version. Accessibility and mobile: Provide button controls, keyboard access, labelled page state, and a readable fallback. On mobile, use swipe or stacked pages rather than forcing precise 3D page clicks. Reduced-motion users should get instant page changes or a static sequence. Performance budget: Compress page textures, keep page count controlled, avoid heavy real-time shadows, cap DPR, and load only what the experience needs. Dispose of textures and geometry when leaving the route. Common mistakes: - Putting important copy only on a texture inside the 3D book. - Making page navigation depend on tiny click targets. - Using a book metaphor for content that should simply be a page. Props: - `pageSpeed` (number, default 0.8): Speed of the page flip animation. - `bookScale` (number, default 1): Overall scale of the 3D book. Usage: ```jsx import BookFlip from '@/components/effects/book-flip' const page = () => { return ( <> ) } ``` Related: Infinite Perspective Slider, Colliding Models, WebGL Slider, Donut Particles ### Colliding Models - Slug: `colliding-models` · Tier: Pro · Category: WebGL & 3D Effects - Install: `npx hyperiux add colliding-models` - Docs: https://vault.hyperiux.com/effects/webgl-effects/colliding-models · Live demo: https://vault.hyperiux.com/demo/colliding-models - Dependencies: @react-three/drei, @react-three/fiber, @react-three/postprocessing, @react-three/rapier, maath, three - Tags: Drei, React Three Fiber, React Postprocessing, Rapier, maath, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). Let 3D objects move, collide, and react inside a WebGL scene so the page feels kinetic instead of merely decorated. Best used for: - Creative studio and WebGL capability pages where interaction proves the point. - Brand heroes that need kinetic objects rather than passive decorative shapes. - Experimental pages where pointer or click input can safely enhance the scene. Not for: Not for product flows, forms, documentation, checkout, or pages where users need quiet reading and precise clicking. Not for large model sets without a strict physics and rendering budget. Accessibility and mobile: The 3D field should be optional. Keep the message, CTA, and navigation outside the canvas. On mobile, reduce physics, simplify interaction, or use a static poster. Reduced-motion users should not receive bouncing objects or collision bursts. Performance budget: Use lightweight models, simple colliders, capped DPR, limited postprocessing, and offscreen pause. Keep physics bodies predictable and avoid simulating more objects than the page can justify. Common mistakes: - Letting physics objects cover the CTA. - Using detailed mesh colliders where simple collision shapes would do. - Making click/tap interaction essential to understanding the page. Props: - `geometry` (string, default "model"): Shape of the colliding pieces: the Hyperiux logo model or a built-in geometry. - `connectorCount` (number, default 8): Number of connecting shapes or joints. - `modelScale` (number, default 1): Scale applied to the 3D model. - `backgroundColor` (string, default "#141518"): Canvas background color. - `returnToPosition` (boolean, default true): Pull pieces back to the cluster after the cursor knocks them away. - `returnSpeed` (number, default 1): How quickly knocked pieces come back to the cluster. Usage: ```jsx import CollidingModels from "@/components/effects/colliding-models"; const page = () => { return ( <> ); }; export default page; ``` Related: Donut Particles, Book Flip, Fractal Glass, Grid Lift ### Curved Plane - Slug: `curved-plane` · Tier: Pro · Category: WebGL & 3D Effects - Install: `npx hyperiux add curved-plane` - Docs: https://vault.hyperiux.com/effects/webgl-effects/curved-plane · Live demo: https://vault.hyperiux.com/demo/curved-plane - Dependencies: three - Tags: Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A WebGL image carousel effect whose planes bend with drag and scroll speed, adding subtle spatial depth to a looping row or columns of images. Best used for: - Portfolio and product pages where subtle image-surface depth justifies the WebGL dependency. - Case-study galleries where a set of strong visuals needs premium treatment without full-scene complexity. - Launch pages where spatial polish matters but the message still belongs in HTML. Not for: Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever. Accessibility and mobile: Keep meaningful content in HTML outside the canvas, which is aria-hidden and has no keyboard controls. On mobile, touch drag moves the carousel and the full-screen container blocks page scrolling, so switch to a poster if the scene cannot hold frame rate. Performance budget: The renderer allows DPR up to 2, so cap it at 1.0 on touch/mobile and 1.5 on mid-range desktop. Curved Plane already pauses offscreen and in hidden tabs, has no postprocessing, and texture sizes should stay controlled. Common mistakes: - Using surface bend to decorate weak imagery that should be replaced instead. - Pushing curvature so far that the image becomes harder to read. - Treating the plane as a content container instead of a visual surface behind real HTML. Props: - `speed` (number, default 1): Drag, wheel, and inertia movement speed. - `curveValue` (number, default 1): Multiplier for the image plane curvature deformation. - `gap` (number, default 1): Spacing multiplier between image planes. - `imageSize` (number, default 1): Image plane size multiplier. Usage: ```jsx import CurvedPlane from "@/components/effects/curved-plane"; export default function page() { return ( <> ); } ``` Related: Fractal Glass, Grid Lift, Stack Loader, Character Trail ### Donut Particles - Slug: `donut-particles` · Tier: Pro · Category: WebGL & 3D Effects - Install: `npx hyperiux add donut-particles` - Docs: https://vault.hyperiux.com/effects/webgl-effects/donut-particles · Live demo: https://vault.hyperiux.com/demo/donut-particles - Dependencies: @react-three/fiber, three - Tags: React Three Fiber, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). Turn particles into a sculptural WebGL centerpiece for bold hero sections that need presence before the first scroll. Best used for: - Bold brand heroes where one particle sculpture can carry the visual identity. - AI, creative, or technical launches that need a memorable WebGL centerpiece. - Desktop-first hero sections where the 3D object enhances copy instead of replacing it. Not for: Not for text-heavy pages, dashboards, checkout flows, dense product sections, or mobile-first routes where the particle scene becomes the page’s heaviest asset. Not for brands that need calm clarity more than a sculptural first impression. Accessibility and mobile: Treat the particle object as decorative unless it communicates a real state. Hide decorative canvas content from assistive technology. On mobile and reduced motion, use a static poster, lower particle count, or simplified geometry. Performance budget: Cap DPR, tune particle count, avoid expensive materials, pause the render loop offscreen, and dispose of buffers and materials on route change. Test on a mid-range laptop, not only on the machine that wrote the code. Common mistakes: - Making the particle object brighter than the CTA. - Using too many particles before checking frame rate. - Letting the WebGL scene carry the only visual meaning of the page. Props: - `particleSize` (number, default 1): Scale multiplier applied to every particle's rendered size. - `donutScale` (number, default 3.5): Scale applied to the particle donut. - `particleColor` (color, default "#9973ff"): Base color used for the particle glow cycle. - `mouseInteraction` (boolean, default true): Enables cursor-driven particle flow on desktop viewports. - `speed` (number, default 1): Playback speed multiplier for rotation and particle motion. - `intensity` (number, default 1): Strength multiplier for particle glow and cursor interaction force. - `donutPosition` (array, default [0,0,0]): XYZ position of the particle donut. - `donutRotation` (array, default [-1.0471975512,0.7853981634,0]): XYZ rotation of the particle donut in radians. - `cameraPosition` (array, default [2,4,6]): XYZ camera position for the WebGL scene. - `dpr` (array, default [1,2]): Device pixel ratio range used by the canvas. - `morphDuration` (number, default 1.5): Seconds for scattered particles to settle back into the donut. - `demorphIntensity` (number, default 1): How strongly the cursor pulls particles out of the donut shape. - `rotationSpeed` (number, default 1): Donut spin speed multiplier. - `tiltX` (number, default -60): Donut tilt around the X axis in degrees. - `tiltY` (number, default 45): Donut tilt around the Y axis in degrees. Usage: ```jsx import DonutParticles from "@/components/effects/donut-particles"; const index = () => { return ( <> ); }; export default index; ``` Related: Butterfly Trail Cursor, Book Flip, Coffee Bean Cursor, WebGL Slider ### Draggable Canvas - Slug: `draggable-canvas` · Tier: Pro · Category: WebGL & 3D Effects - Install: `npx hyperiux add draggable-canvas` - Docs: https://vault.hyperiux.com/effects/webgl-effects/draggable-canvas · Live demo: https://vault.hyperiux.com/demo/draggable-canvas - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). An interactive WebGL canvas that lets users drag and explore product visuals, portfolio surfaces, or branded hero scenes. Best used for: - Interactive showcases where drag adds exploration but does not gate content. - Portfolio surfaces where movement helps visitors feel the work before opening it. - Hero scenes that need tactile behavior with a clear touch fallback. Not for: Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever. Accessibility and mobile: Keep meaningful content in HTML outside the canvas. On mobile, reduce shader quality and switch to a poster if the scene cannot hold frame rate. Performance budget: Cap DPR at 1.0 on touch/mobile and up to 1.5 on mid-range desktop. Pause Draggable Canvas offscreen and in hidden tabs, reduce postprocessing before shipping, and keep texture sizes controlled. Common mistakes: - Making drag the only way to discover content or controls. - Letting the canvas sit above focusable links and buttons. - Forgetting that touch users need visible controls or a simplified interaction path. Props: - `friction` (number, default 0.12): Inertia friction after drag release. - `scaleOnDrag` (number, default 1.04): Scale applied while dragging. - `backgroundColor` (string, default "#000000"): Canvas background color. - `canvasBorderColor` (string, default "#71717a"): Border color for each draggable canvas window. - `rounded` (number, default 0): Corner radius for each draggable canvas window. Usage: ```jsx import DraggableCanvas from '@/components/effects/draggable-canvas' const page = () => { return ( <> ) } export default page ``` Related: Interactive List Preview, Pixelated Image Effect, Overflow Text Reveal, Zoom Slider ### File Encryption - Slug: `file-encryption` · Tier: Pro · Category: WebGL & 3D Effects - Install: `npx hyperiux add file-encryption` - Docs: https://vault.hyperiux.com/effects/webgl-effects/file-encryption · Live demo: https://vault.hyperiux.com/demo/file-encryption - Dependencies: gsap - Tags: GSAP - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A security visualization component that animates file protection states for cybersecurity, privacy, and trust sections. Best used for: - Cybersecurity and privacy sections where protection needs a clear visual metaphor beside real copy. - Product pages that need to show secure handling without turning trust into vague animation. - Security storytelling sections where the visual supports, not replaces, the trust claim. Not for: Not for security claims that the product cannot prove, or for pages where animation substitutes for clear privacy, compliance, or encryption copy. Accessibility and mobile: Treat decorative encryption motion as visual support. Keep the actual security meaning in text and make the sequence understandable when motion is disabled. Performance budget: Keep the file motion short and lightweight, avoid continuous loops near long copy, and pause or simplify the animation offscreen. Common mistakes: - Letting the animation make an unsupported security promise. - Hiding the explanation inside the moving file graphic. - Running the protection loop constantly on mobile. Props: - `accentColor` (string, default "#ff5f00"): Beam, particle, and heading accent color. - `backgroundColor` (string, default "#07060f"): Scene and marquee background color. - `speed` (number, default 1): Marquee, particle, and scramble animation speed. - `cardSize` (number, default 1): Credit card size multiplier. Usage: ```jsx import FileEncryption from "@/components/effects/file-encryption"; export default function Page() { return ( <> ); } ``` Related: Gooey Counter, Grid Lift, Animated Toggle, Split Canvas ### Fractal Glass - Slug: `fractal-glass` · Tier: Free · Category: WebGL & 3D Effects - Install: `npx hyperiux add fractal-glass` - Docs: https://vault.hyperiux.com/effects/webgl-effects/fractal-glass · Live demo: https://vault.hyperiux.com/demo/fractal-glass - Dependencies: three - Tags: Three.js - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A premium WebGL refraction effect that splits the hero surface into shifting glass-like facets for brand launches and portfolio pages. Best used for: - Premium brand heroes where refraction and facets can prove craft without burying the message. - WebGL surfaces that have a poster fallback, mobile simplification, and clear HTML content. - Fractal Glass gives the hero a proof-of-craft surface while preserving HTML copy and fallback design. Not for: Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever. Accessibility and mobile: Keep meaningful content in HTML outside the canvas. On mobile, reduce shader quality and switch to a poster if the scene cannot hold frame rate. Performance budget: Cap DPR at 1.0 on touch/mobile and up to 1.5 on mid-range desktop. Pause Fractal Glass offscreen and in hidden tabs, reduce postprocessing before shipping, and keep texture sizes controlled. Common mistakes: - Making Fractal Glass the only place the message exists. - Shipping the highest-cost visual tier on mobile without simplification or fallback. - Forgetting poster fallback and render-loop pause. Props: - `stripesFrequency` (number, default 40): Controls how many refractive glass strips are rendered. - `glassStrength` (number, default 2): Controls the intensity of the strip refraction. - `glassSmoothness` (number, default 0.014): Controls how smoothly neighboring refraction samples blend. - `parallaxStrength` (number, default 0.15): Controls pointer-reactive horizontal parallax. - `distortionMultiplier` (number, default 8): Amplifies parallax around distorted stripe regions. - `edgePadding` (number, default 0.12): Softens distortion near the media edges. - `imageSrc` (string, default "https://picsum.photos/seed/h13/1600/1200"): Image URL refracted through the glass strips (needs CORS). Usage: ```jsx import FractalGlass from "@/components/effects/fractal-glass"; const images = { blob: "https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/vault-listing-images/assets-images/h-13.jpg", }; export default function Home() { return ( <> ); } ``` Related: Progressive Bloom Valley, Hero Banner Animated, Curved Plane ### Grid Tunnel - Slug: `grid-tunnel` · Tier: Pro · Category: WebGL & 3D Effects - Install: `npx hyperiux add grid-tunnel` - Docs: https://vault.hyperiux.com/effects/webgl-effects/grid-tunnel · Live demo: https://vault.hyperiux.com/demo/grid-tunnel - Dependencies: @react-three/drei, @react-three/fiber, three - Tags: Drei, React Three Fiber, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A scroll-driven WebGL tunnel effect that moves the viewer through an endless, image-lined vanishing-point grid for technical launches and portfolio heroes. Best used for: - Technical launches where vanishing-point depth supports the positioning before the copy expands it. - Developer-tool and cybersecurity heroes where engineered space is part of the brand language. - Portfolio openers where kinetic depth earns its GPU budget. Not for: Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever. Accessibility and mobile: Keep meaningful content in HTML outside the canvas, which is aria-hidden. On mobile, vertical swipes drive the tunnel instead of scrolling the page, so switch to a poster if the scene cannot hold frame rate. Performance budget: The canvas already caps DPR at 1.5 and pauses offscreen and in hidden tabs; drop DPR to 1.0 on touch/mobile, and keep texture sizes controlled, since each tunnel chunk places up to 50 image panels. Common mistakes: - Placing the tunnel above content visitors need to scroll to, since it captures wheel and touch scrolling for the whole window. - Letting tunnel movement reduce headline legibility. - Forgetting to pause the loop when the section is offscreen or the tab is hidden. Props: - `numberOfGrids` (number, default 24): Number of grid cells (density of the tunnel grid). - `shape` (string, default "rectangle"): Tunnel cross-section: rectangle or circle (the images curve with the circular walls). - `speed` (number, default 1): Scroll and touch travel speed. - `depth` (number, default 1000): Visible tunnel fog depth. - `lineColor` (string, default "#9ca3af"): Grid line color. - `backgroundColor` (string, default "#ffffff"): Tunnel background color. Usage: ```jsx import GridTunnel from "@/components/effects/grid-tunnel"; const page = () => { return ( <> ); }; export default page; ``` Related: Fractal Glass, Milky Way, Mouse Pixelation ### Hero Banner Animated - Slug: `hero-banner-animated` · Tier: Pro · Category: WebGL & 3D Effects - Install: `npx hyperiux add hero-banner-animated` - Docs: https://vault.hyperiux.com/effects/webgl-effects/hero-banner-animated · Live demo: https://vault.hyperiux.com/demo/hero-banner-animated - Dependencies: @react-three/drei, @react-three/fiber, @react-three/postprocessing, gsap, lucide-react, motion, postprocessing, three - Tags: Drei, React Three Fiber, React Postprocessing, GSAP, Lucide, Motion, postprocessing, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A layered WebGL hero banner that gives launch pages, brand debuts, and portfolio first screens a crafted animated opening. Best used for: - Launch and brand-debut pages where the first screen must prove craft within the opening second. - Portfolio heroes where motion supports the central claim rather than becoming the claim. - Campaign pages that need a memorable opening without hiding the CTA. Not for: Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever. Accessibility and mobile: Keep meaningful content in HTML outside the canvas. On mobile, reduce shader quality and switch to a poster if the scene cannot hold frame rate. Performance budget: Cap DPR at 1.0 on touch/mobile and up to 1.5 on mid-range desktop. Pause Animated Hero Banner offscreen and in hidden tabs, reduce postprocessing before shipping, and keep texture sizes controlled. Common mistakes: - Letting layered hero motion compete with the headline after the first impression has landed. - Baking the primary message or CTA into the canvas instead of HTML. - Shipping the animated state without a still poster that feels intentionally composed. Props: - `mouseMovement` (boolean, default true): Enables the cursor-tracked point light. - `intensity` (number, default 3): Peak brightness of the cursor-tracked point light when the scene is not zoomed. - `lerp` (number, default 0.1): Smoothing factor for the point light following the cursor; higher values follow faster. - `accentColor` (string, default "#ECE4B4"): Accent color for hero text, markers, links, and icon highlights. Usage: ```jsx import HeroBannerAnimated from '@/components/effects/hero-banner-animated' const page = () => { return ( <> ) } export default page ``` Related: Gooey Counter, Coffee Bean Cursor, Hyperiux Glitter, Blur Text, Grid Scale ### Hover Slider - Slug: `hover-slider` · Tier: Pro · Category: WebGL & 3D Effects - Install: `npx hyperiux add hover-slider` - Docs: https://vault.hyperiux.com/effects/webgl-effects/hover-slider · Live demo: https://vault.hyperiux.com/demo/hover-slider - Dependencies: gsap, three - Tags: GSAP, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A hover-preview slider that pairs feature lists, work grids, or product items with contextual visual previews. Best used for: - Feature and capability previews where hover can reveal context on desktop. - Product pages that also provide tap or stacked access for touch users. - Feature previews where hover speeds exploration but touch and keyboard access stay equal. Not for: Not for essential information that mobile, keyboard, or no-hover users cannot reach. Accessibility and mobile: Support focus and tap paths for every preview. On mobile, switch to stacked cards, accordions, or tap-controlled panels instead of hover-only reveal. Performance budget: Pre-size preview media, avoid swapping large images on every pointer movement, and lazy-load only previews that are likely to appear. Common mistakes: - Making hover the only way to see the preview. - Loading every large preview image upfront. - Letting preview motion move the list or CTA targets. Props: - `transitionDuration` (number, default 0.45): Hover reveal and curve transition duration. - `imageScale` (number, default 0.95): WebGL image plane scale. - `curveFactor` (number, default 1): Multiplier for the circular arc image curvature. Usage: ```jsx import HoverSlider from "@/components/effects/hover-slider"; const page = () => { return ( <> ); }; export default page; ``` Related: Pixelated Image Effect, Hero Banner Animated, Dot Fill Button, Depth Card Stack, Stack Loader ### Hyperiux Glitter - Slug: `hyperiux-glitter` · Tier: Pro · Category: WebGL & 3D Effects - Install: `npx hyperiux add hyperiux-glitter` - Docs: https://vault.hyperiux.com/effects/webgl-effects/hyperiux-glitter · Live demo: https://vault.hyperiux.com/demo/hyperiux-glitter - Dependencies: @react-three/drei, @react-three/fiber, @react-three/postprocessing, three - Tags: Drei, React Three Fiber, React Postprocessing, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). Add a premium shimmer layer to brand heroes and launch sections, giving the page a polished visual surface without burying the message. Best used for: - Premium homepages where shimmer, texture, and light are part of the brand system. - Launch sections that need atmosphere without video or a full 3D object scene. - Short hero moments where the glitter can be restrained, masked, and paused. Not for: Not for long reading pages, dashboards, forms, checkout, low-contrast layouts, or sites already carrying heavy video and WebGL. Not for pages where the glitter competes with the headline or makes buttons harder to find. Accessibility and mobile: Treat the effect as decorative. Hide the canvas from assistive technology, preserve foreground contrast, and disable pointer-following shimmer on coarse pointers. Reduced-motion users should see a static surface. Performance budget: Cap DPR, keep particle or shader work lean, avoid heavy postprocessing unless it earns the scene, and pause animation offscreen. Provide a static gradient or image fallback for low-power devices. Common mistakes: - Letting sparkle density fight headline readability. - Running the effect behind forms or important decision copy. - Treating glitter as a brand strategy. It is light, not positioning. Props: - `glitterColor` (string, default "#ffffff"): Primary glitter color. - `accentColor` (string, default "#ffffff"): Secondary glitter highlight color. - `speed` (number, default 1): Particle animation speed. - `mouseInfluence` (number, default 1): Cursor influence on glitter movement. - `rotationInfluence` (number, default 1): Cursor influence on model rotation. - `geometry` (string, default "model"): Shape the glitter forms: the Hyperiux model or a built-in geometry. - `demorphStrength` (number, default 1): How far the cursor scatters (demorphs) the particles. - `demorphRadius` (number, default 1.8): How wide an area around the cursor gets demorphed. - `trailLength` (number, default 1): Length of the glittering mouse trail. Usage: ```jsx import HyperiuxGlitter from '@/components/effects/hyperiux-glitter' const page = () => { return ( <> ) } ``` Related: Helix Slider, Character Stagger Primary Button, Coffee Bean Cursor, Grid Tunnel ### Interactive Blur Reveal - Slug: `interactive-blur-reveal` · Tier: Free · Category: WebGL & 3D Effects - Install: `npx hyperiux add interactive-blur-reveal` - Docs: https://vault.hyperiux.com/effects/webgl-effects/interactive-blur-reveal · Live demo: https://vault.hyperiux.com/demo/interactive-blur-reveal - Dependencies: none beyond React - Tags: WebGL shader - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A WebGL reveal effect that sharpens imagery through pointer or touch exploration for image-led heroes and campaign visuals. Best used for: - Image-led heroes where exploration is part of the reveal, not a barrier to the message. - Portfolio previews where detail can emerge without hiding navigation or CTA copy. - Campaign sections where the visual reward is optional but memorable. Not for: Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever. Accessibility and mobile: Keep meaningful content in HTML outside the canvas. On mobile, reduce shader quality and switch to a poster if the scene cannot hold frame rate. Performance budget: Cap DPR at 1.0 on touch/mobile and up to 1.5 on mid-range desktop. Pause Interactive Blur Reveal offscreen and in hidden tabs, reduce postprocessing before shipping, and keep texture sizes controlled. Common mistakes: - Blurring text, captions, or critical UI that users need before they explore. - Using blur as a gimmick when the revealed image adds no decision value. - Leaving touch and keyboard users without an equivalent clear image. Props: - `mouseRadius` (number, default 180): Radius of the cursor reveal mask in canvas pixels. - `mouseInteraction` (boolean, default true): Enables pointer-driven reveal drawing. - `duration` (number, default 0.3): Trail persistence and fade duration in seconds. Usage: ```jsx import InteractiveBlurReveal from '@/components/effects/interactive-blur-reveal' const Page = () => { return (
) } export default Page ``` Related: Fractal Glass, Progressive Bloom Valley, Hero Banner Animated, Curved Plane ### Milky Way - Slug: `milky-way` · Tier: Free · Category: WebGL & 3D Effects - Install: `npx hyperiux add milky-way` - Docs: https://vault.hyperiux.com/effects/webgl-effects/milky-way · Live demo: https://vault.hyperiux.com/demo/milky-way - Dependencies: @react-three/drei, @react-three/fiber, @react-three/postprocessing, gsap, lucide-react, postprocessing, three - Tags: Drei, React Three Fiber, React Postprocessing, GSAP, Lucide, postprocessing, Three.js - Access: Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first). A WebGL starfield background that adds scale and atmospheric depth to AI, space-adjacent, developer-tool, and premium brand heroes. Best used for: - Hero sections where atmospheric scale matters more than direct interaction. - AI and technical launch pages where a controlled starfield supports the first claim. - Portfolio or campaign pages where the field is ambience, not content. Not for: Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever. Accessibility and mobile: Keep meaningful content in HTML outside the canvas. On mobile, reduce shader quality and switch to a poster if the scene cannot hold frame rate. Performance budget: Cap DPR at 1.0 on touch/mobile and up to 1.5 on mid-range desktop. Pause Milky Way offscreen and in hidden tabs, reduce postprocessing before shipping, and keep texture sizes controlled. Common mistakes: - Using particle density where a static starfield would carry the same atmosphere. - Making the starfield the only place the visual identity exists. - Leaving a continuous particle loop running below the fold. Props: - `particleSize` (number, default 2): Particle and nebula point size multiplier. - `numberOfParticles` (number, default 80000): Number of star particles in the galaxy. - `coreColor` (string, default "#ffbb00"): Bright inner galaxy and starfield color. - `accentColor` (string, default "#ffffff"): Nebula and sparkle accent color. - `outerColor` (string, default "#4400ff"): Outer arm and warm sparkle color. - `backgroundColor` (string, default "#000114"): Canvas background color. - `rotation` (number, default 1.6): How strongly the galaxy tilts with mouse movement. - `mouseInfluence` (boolean, default true): Enable cursor-driven galaxy tilt. - `rotationSpeed` (number, default 0.9): Speed the particles orbit around the galaxy centre. Usage: ```jsx import MilkyWay from "@/components/effects/milky-way" const page = () => { return ( ) } export default page ``` Related: Fractal Glass, Progressive Bloom Valley, Hero Banner Animated, Curved Plane, Interactive Blur Reveal ### Mouse Pixelation - Slug: `mouse-pixelation` · Tier: Pro · Category: WebGL & 3D Effects - Install: `npx hyperiux add mouse-pixelation` - Docs: https://vault.hyperiux.com/effects/webgl-effects/mouse-pixelation · Live demo: https://vault.hyperiux.com/demo/mouse-pixelation - Dependencies: @react-three/fiber, @react-three/postprocessing, gsap, three - Tags: React Three Fiber, React Postprocessing, GSAP, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A pointer-led WebGL pixelation effect that reveals image detail through cursor movement for portfolios, campaigns, and technical hero surfaces. Best used for: - Pointer-led hero surfaces where interaction reveals image detail without hiding the message. - Creative portfolios where the cursor can become part of the looking experience. - Technical brand pages where pixelation supports the visual language. Not for: Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever. Accessibility and mobile: Keep meaningful content in HTML outside the canvas. On mobile, reduce shader quality and switch to a poster if the scene cannot hold frame rate. Performance budget: Cap DPR at 1.0 on touch/mobile and up to 1.5 on mid-range desktop. Pause Mouse Pixelation offscreen and in hidden tabs, reduce postprocessing before shipping, and keep texture sizes controlled. Common mistakes: - Requiring pointer movement for the page to make sense on touch devices. - Pixelating critical text or controls instead of imagery. - Forgetting the clean still image state for reduced motion and mobile. Props: - `v1NumberOfGrids` (number, default 35): V1 · Pixel Circles: number of grid cells across the effect. - `v1Lerp` (number, default 0.1): V1 · Pixel Circles: smoothing of the mouse-following motion. - `v1BackgroundColor` (string, default "#000000"): V1 · Pixel Circles: canvas background color. - `v2NumberOfGrids` (number, default 35): V2 · Pixel Shift: number of grid cells across the effect. - `v2Lerp` (number, default 0.1): V2 · Pixel Shift: smoothing of the mouse-following motion. - `v3NumberOfGrids` (number, default 35): V3 · Pixel Cube: number of grid cells across the effect. - `v3Lerp` (number, default 0.1): V3 · Pixel Cube: smoothing of the mouse-following motion. - `v3CubeSize` (number, default 1): V3 · Pixel Cube: scale of the cube. - `v3GridEmbossing` (number, default 1): V3 · Pixel Cube: depth of the extruded grid. - `variant` (enum, default "pixel-shift"): Initial version shown: V1 Pixel Circles, V2 Pixel Shift, V3 Pixel Cube. - `imageUrl` (string, default "https://picsum.photos/seed/h02/1600/1200"): V2 · Pixel Shift: image URL rendered as the pixel grid. Usage: ```jsx import MousePixelation from '@/components/effects/mouse-pixelation' const page = () => { return ( <> ) } export default page ``` Related: Fractal Glass, Progressive Bloom Valley, Hero Banner Animated, Curved Plane, Interactive Blur Reveal ### Progressive Bloom Valley - Slug: `progressive-bloom-valley` · Tier: Pro · Category: WebGL & 3D Effects - Install: `npx hyperiux add progressive-bloom-valley` - Docs: https://vault.hyperiux.com/effects/webgl-effects/progressive-bloom-valley · Live demo: https://vault.hyperiux.com/demo/progressive-bloom-valley - Dependencies: @react-three/drei, @react-three/fiber, @react-three/postprocessing, postprocessing, three - Tags: Drei, React Three Fiber, React Postprocessing, postprocessing, Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A WebGL hero effect with bloom, depth, and atmosphere for premium AI launches, product pages, and creative portfolio openings. Best used for: - Premium AI or product-launch heroes where bloom and depth justify a real GPU budget. - First screens that keep copy, CTA, poster fallback, and reduced-motion behaviour outside the canvas. - Progressive Bloom Valley gives the hero a proof-of-craft surface while preserving HTML copy and fallback design. Not for: Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever. Accessibility and mobile: Keep meaningful content in HTML outside the canvas. On mobile, reduce shader quality and switch to a poster if the scene cannot hold frame rate. Performance budget: Cap DPR at 1.0 on touch/mobile and up to 1.5 on mid-range desktop. Pause Progressive Bloom Valley offscreen and in hidden tabs, reduce postprocessing before shipping, and keep texture sizes controlled. Common mistakes: - Making Progressive Bloom Valley the only place the message exists. - Shipping high DPR and bloom-heavy settings on mobile without a lower tier. - Forgetting poster fallback and render-loop pause. Props: - `bloomStrength` (number, default 1.2): Flower shader glow intensity. - `bloomRadius` (number, default 0.4): Edge bloom softness radius. - `cameraSpeed` (number, default 1): Camera movement speed through the scene. - `backgroundColor` (string, default "#000000"): Scene background color. Usage: ```jsx import ProgressiveBloomValley from "@/components/effects/progressive-bloom-valley"; export default function page() { return ( <> ); } ``` Related: Milky Way, Helix Slider, Animated FAQ, Fractal Glass ### Strip Slider - Slug: `strip-slider` · Tier: Pro · Category: WebGL & 3D Effects - Install: `npx hyperiux add strip-slider` - Docs: https://vault.hyperiux.com/effects/webgl-effects/strip-slider · Live demo: https://vault.hyperiux.com/demo/strip-slider - Dependencies: three - Tags: Three.js - Access: Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first). A strip-based scroll slider that reveals campaign visuals, project assets, or story sections one layer at a time. Best used for: - Campaign or portfolio strips where a deliberate mid-page beat helps the narrative breathe. - Case studies and campaign stories revealed one layer at a time. - Teases campaign content sequentially, keeping visitors in the reveal moment longer than a static hero. Not for: Not for first-screen messaging, product comparison, or mobile flows that need immediate vertical scanning. Not for above-the-fold sections where it delays the first message. Accessibility and mobile: The animated sequence must match DOM order. On mobile, replace pinned or horizontal mechanics with stacked sections, native swipe, or static cards. Performance budget: Animate transform and opacity, avoid layout reads in scroll handlers, pre-size media, and clean up timelines/listeners when the route changes. Common mistakes: - Using so many strips that the reveal becomes visual static instead of anticipation. - Placing the strip sequence above the fold where it delays the first message. - Forgetting that touch users need swipe/buttons, not a desktop-only strip mechanic. Props: - `dispScale` (number, default 1): Multiplier on the ripple/displacement wave strength across all gallery images (collapsed and expanded). - `cameraSway` (number, default 0.03): How much the camera drifts toward the pointer position. - `hideCentralStrip` (boolean, default false): Hides the central white strip overlay around the active image. - `imageSize` (number, default 1): Scales the strip gallery image group without recreating the WebGL scene. Usage: ```jsx import StripSlider from '@/components/effects/strip-slider' const page = () => { return ( <> ) } ``` Related: Scroll Stack, 3D Portfolio Slider, Parallax Gallery, Horizontal Feature Reveal ## Templates - [All templates](https://vault.hyperiux.com/templates): Interactive React & Next.js website templates, each with source code and a Figma file - [Elena Voss](https://vault.hyperiux.com/templates/elenavoss): Portfolio template · [live demo](https://vault.hyperiux.com/template-demo/elenavoss) - [Oris Dental](https://vault.hyperiux.com/templates/oris-dental): Healthcare template · [live demo](https://vault.hyperiux.com/template-demo/oris-dental) - [Lumera](https://vault.hyperiux.com/templates/lumera): Real Estate template · [live demo](https://vault.hyperiux.com/template-demo/lumera) - [Kyntra](https://vault.hyperiux.com/templates/kyntra): App template · [live demo](https://vault.hyperiux.com/template-demo/kyntra) ## Blog posts - [When CSS Animation Is Enough and When React Needs a Library](https://vault.hyperiux.com/blog/when-css-animation-is-enough-and-when-react-needs-a-library) - [The Hidden Complexity of Page Transitions in the Next.js App Router](https://vault.hyperiux.com/blog/the-hidden-complexity-of-page-transitions-in-the-next-js-app-router) - [Prebuilt Interaction Patterns vs Hand-Built Animations in React](https://vault.hyperiux.com/blog/prebuilt-interaction-patterns-vs-hand-built-animations-in-react) - [Native Scroll Timelines Are Here: Does Every Scroll Effect Still Need JavaScript?](https://vault.hyperiux.com/blog/native-scroll-timelines-are-here-does-every-scroll-effect-still-need-javascript) - [How to Build Scroll Animations in React Without Turning the Page Into a Timeline Mess](https://vault.hyperiux.com/blog/how-to-build-scroll-animations-in-react-without-turning-the-page-into-a-timeline-mess) - [How to Build Reusable React Animation Components Without Making Every Effect Config-Heavy](https://vault.hyperiux.com/blog/how-to-build-reusable-react-animation-components-without-making-every-effect-config-heavy) ## Legal - [License Agreement](https://vault.hyperiux.com/legal/license-agreement) - [Privacy Policy](https://vault.hyperiux.com/legal/privacy-policy) - [Refund Policy](https://vault.hyperiux.com/legal/refund-policy) - [Terms of Service](https://vault.hyperiux.com/legal/terms-of-service) ## Optional - [Text Animations: full details](https://vault.hyperiux.com/llms/text-animations.txt): Every text animations effect with use cases, constraints, usage code and props - [Animated Backgrounds: full details](https://vault.hyperiux.com/llms/backgrounds.txt): Every animated backgrounds effect with use cases, constraints, usage code and props - [Animated Buttons: full details](https://vault.hyperiux.com/llms/buttons.txt): Every animated buttons effect with use cases, constraints, usage code and props - [Carousel Effects: full details](https://vault.hyperiux.com/llms/carousels.txt): Every carousel effects effect with use cases, constraints, usage code and props - [Scroll Effects: full details](https://vault.hyperiux.com/llms/scroll-effects.txt): Every scroll effects effect with use cases, constraints, usage code and props - [Creative Components: full details](https://vault.hyperiux.com/llms/components.txt): Every creative components effect with use cases, constraints, usage code and props - [Navigations: full details](https://vault.hyperiux.com/llms/navigation.txt): Every navigations effect with use cases, constraints, usage code and props - [Cursor Effects: full details](https://vault.hyperiux.com/llms/cursor-effects.txt): Every cursor effects effect with use cases, constraints, usage code and props - [Page Transitions: full details](https://vault.hyperiux.com/llms/page-transitions.txt): Every page transitions effect with use cases, constraints, usage code and props - [Loaders: full details](https://vault.hyperiux.com/llms/loaders.txt): Every loaders effect with use cases, constraints, usage code and props - [WebGL & 3D Effects: full details](https://vault.hyperiux.com/llms/webgl-effects.txt): Every webgl & 3d effects effect with use cases, constraints, usage code and props - [Full catalogue as text](https://vault.hyperiux.com/llms-full.txt): Every effect in one file (large - the per-category files above are easier to read whole) - [Sitemap](https://vault.hyperiux.com/sitemap.xml): Full URL index including every individual effect page - [Sign up](https://vault.hyperiux.com/sign-up): Create a free account to copy and install free effects