{"name":"Hyperiux Vault","url":"https://vault.hyperiux.com/ai-components","site":"https://vault.hyperiux.com","description":"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.","company":"Hyperiux Immersion Labs Private Limited","totals":{"effects":151,"free":56,"pro":95,"categories":11,"templates":4},"requirements":[{"name":"Framework","value":"React 18+ or Next.js 14+ (App Router or Pages Router); Vite + React projects work too"},{"name":"WebGL / 3D","value":"WebGL and 3D effects use React Three Fiber 9, which needs React 19 (Next.js 15+)"},{"name":"Page transitions","value":"Effects built on next-transition-router need the Next.js App Router"},{"name":"Styling","value":"Tailwind CSS v3 or v4"},{"name":"Runtime","value":"Node.js 18.17+ (20+ recommended)"},{"name":"Package manager","value":"npm, pnpm, yarn or bun"},{"name":"Language","value":"JavaScript or TypeScript (every effect ships .jsx and .tsx)"}],"install":{"init":"npx hyperiux init","add":"npx hyperiux add ","login":"npx hyperiux login","npm":"https://www.npmjs.com/package/hyperiux"},"mcp":{"command":"npx -y hyperiux-mcp-server","claudeCode":"claude mcp add hyperiux -- npx -y hyperiux-mcp-server","config":{"mcpServers":{"hyperiux":{"command":"npx","args":["-y","hyperiux-mcp-server"]}}}},"categories":[{"id":"text","slug":"text-animations","name":"Text Animations","count":25,"free":12,"url":"https://vault.hyperiux.com/effects/text-animations"},{"id":"backgrounds","slug":"backgrounds","name":"Animated Backgrounds","count":5,"free":3,"url":"https://vault.hyperiux.com/effects/backgrounds"},{"id":"buttons","slug":"buttons","name":"Animated Buttons","count":10,"free":5,"url":"https://vault.hyperiux.com/effects/buttons"},{"id":"carousels","slug":"carousels","name":"Carousel Effects","count":11,"free":6,"url":"https://vault.hyperiux.com/effects/carousels"},{"id":"scroll","slug":"scroll-effects","name":"Scroll Effects","count":24,"free":8,"url":"https://vault.hyperiux.com/effects/scroll-effects"},{"id":"components","slug":"components","name":"Creative Components","count":20,"free":8,"url":"https://vault.hyperiux.com/effects/components"},{"id":"navigation","slug":"navigation","name":"Navigations","count":9,"free":3,"url":"https://vault.hyperiux.com/effects/navigation"},{"id":"cursor","slug":"cursor-effects","name":"Cursor Effects","count":17,"free":4,"url":"https://vault.hyperiux.com/effects/cursor-effects"},{"id":"transitions","slug":"page-transitions","name":"Page Transitions","count":10,"free":2,"url":"https://vault.hyperiux.com/effects/page-transitions"},{"id":"loaders","slug":"loaders","name":"Loaders","count":3,"free":2,"url":"https://vault.hyperiux.com/effects/loaders"},{"id":"webgl","slug":"webgl-effects","name":"WebGL & 3D Effects","count":17,"free":3,"url":"https://vault.hyperiux.com/effects/webgl-effects"}],"effects":[{"slug":"blur-text","title":"Blur Text","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"pro","summary":"A soft text reveal animation that brings headlines, section intros, and short claims into focus with a calm blur-in effect.","description":"Blur Text for React lets words soften into view for calm hero statements, section intros, and premium landing-page copy. Built to stay readable with motion off.","tags":["Motion"],"dependencies":["motion"],"install":"npx hyperiux add blur-text","usage":"import BlurText from \"@/components/effects/blur-text\";\n\nconst Page = () => {\n return (\n
\n \n Blur should feel like a stage entrance, not a loading state.\n \n
\n );\n};\n\nexport default Page;","props":[{"name":"delay","type":"number","default":0,"description":"Delay before the word animation starts."},{"name":"duration","type":"number","default":0.5,"description":"Animation duration per word."},{"name":"blur","type":"number","default":10,"description":"Initial blur amount in pixels."},{"name":"variant","type":"string","default":"fade","description":"Direction variant for the reveal."},{"name":"once","type":"boolean","default":false,"description":"Runs the reveal only once per viewport entry when enabled."},{"name":"textColor","type":"string","default":"#111111","description":"Text color. Unset inherits from the surrounding text."}],"overview":["Blur Text helps important words arrive with intent: words soften into view.","Reach for it on headlines, launch claims, section openers, and one-line proof. Keep it away from body copy, error messages, legal text, and instructions, where reading has to be effortless.","The thing to watch is that the words get lost in the motion. The resolved phrase has to be real DOM text, the animation must not spell itself out to a screen reader, and a reduced-motion visitor should land on the final, readable state at once."],"exampleUseCase":["A skincare brand homepage can use Blur Text on the hero line and the short claims that open each product section. Each phrase softens into focus as it enters the viewport, so the page feels calm and considered rather than loud.","The outcome is composure. The motion sets the tone, then gets out of the way, leaving real, readable text for shoppers and search engines. Ingredient lists, prices, and shipping details stay static, where they can be read right away."],"bestFor":["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."],"notFor":["Not for body text, labels, errors, legal copy, or anything a user must read right away."],"performance":["Limit motion to the phrase that earns it, hold its layout space ahead of time, and keep heavy filters off large blocks of text."],"accessibility":["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."],"commonMistakes":["Using Blur Text on long body copy.","Removing the readable text from the DOM.","Letting split text cause layout shift."],"faq":[{"question":"When should I use Blur Text?","answer":"Use it when a short headline, claim, or intro needs words to soften into view."},{"question":"How do I keep Blur Text accessible?","answer":"Ship the final phrase in the DOM and surface it a single time, hiding duplicated animated fragments from assistive technology where needed."},{"question":"Does Blur Text affect SEO?","answer":"Not when the final text ships as real HTML rather than living inside canvas or client-only animation."},{"question":"How do I avoid layout shift with Blur Text?","answer":"Pre-reserve the final text's space so line breaks stay put across breakpoints."},{"question":"What should reduced motion do for Blur Text?","answer":"Render the settled, legible text at once, with no scrambling, staggering, or looping."}],"access":"Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text","demoUrl":"https://vault.hyperiux.com/demo/blur-text","related":[{"slug":"text-fill-animation","title":"Text Fill Animation","docsUrl":"https://vault.hyperiux.com/effects/text-animations/text-fill-animation"},{"slug":"animated-toggle","title":"Animated Toggle","docsUrl":"https://vault.hyperiux.com/effects/buttons/animated-toggle"},{"slug":"character-trail","title":"Character Trail","docsUrl":"https://vault.hyperiux.com/effects/cursor-effects/character-trail"}]},{"slug":"chromatic-text","title":"Chromatic Text","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"free","summary":"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.","description":"Chromatic Text for React adds RGB-split motion to large headlines for campaign pages, portfolios, and technical brand moments.","tags":["GSAP"],"dependencies":["gsap"],"install":"npx hyperiux add chromatic-text","usage":"import ChromaticText from \"@/components/effects/chromatic-text\";\n\nconst page = () => {\n return (\n <>\n \n\n )\n}","props":[{"name":"baseTextColor","type":"string","default":"#ffffff","description":"Color of the front/base text layer."},{"name":"firstTextColor","type":"string","default":"#FFB200","description":"Color of the red chromatic depth layer."},{"name":"secondTextColor","type":"string","default":"#EB5B00","description":"Color of the blue chromatic depth layer."},{"name":"fontSize","type":"number","default":10,"description":"Font size in vw units shared by every text layer."},{"name":"fontWeight","type":"number","default":500,"description":"Font weight shared by every text layer."},{"name":"backgroundColor","type":"string","default":"#111111","description":"Background color for the scroll section."}],"fixedText":true,"overview":["Chromatic Text turns a headline into an optical signal.","The effect separates the edges of large type into chromatic offsets, creating a controlled RGB-split or aberration treatment. The text can blur, drift, separate, and resolve depending on the trigger model. The result feels digital, unstable, and engineered, but the headline must still come back into focus.","Use Chromatic Text when the headline should feel technical, optical, or slightly charged. It works for AI pages, developer tools, cyber interfaces, music and culture campaigns, creative portfolios, and launch sections where the type can carry a controlled distortion.","The page job is attention with restraint. The visitor should notice the chromatic shift, understand the headline, and keep moving. If the effect makes the words harder to read than the message deserves, the animation has become the main character."],"exampleUseCase":["A cyber or AI product page can use Chromatic Text in the hero to give the first claim a controlled signal-distortion effect. The headline briefly separates into chromatic edges, then resolves into readable copy.","The outcome is tension. The page feels technical and alive without sacrificing the clarity of the claim."],"bestFor":["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."],"notFor":["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."],"performance":["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."],"accessibility":["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."],"commonMistakes":["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."],"faq":[{"question":"What is Chromatic Text?","answer":"Chromatic Text is a React text animation that adds RGB-split, chromatic-aberration, or channel-offset motion to large typography."},{"question":"When should I use Chromatic Text?","answer":"Use it for short hero headlines, campaign statements, and technical brand moments where optical distortion supports the visual identity."},{"question":"Is Chromatic Text good for body copy?","answer":"No. Use it on large, short text only. Body copy should remain stable, readable, and boring in the best possible way."},{"question":"How do I keep Chromatic Text accessible?","answer":"Expose the real headline once and hide decorative duplicated text layers from assistive technology where appropriate."},{"question":"Does Chromatic Text affect SEO?","answer":"Not if the headline remains real HTML. Avoid rendering the only meaningful text inside canvas, image layers, or client-only visual duplicates."},{"question":"What should reduced motion do for Chromatic Text?","answer":"Show the final readable headline immediately. Remove scroll-linked distortion, RGB-channel travel, blur, and repeated motion."},{"question":"Can Hyperiux adapt Chromatic Text for a real brand system?","answer":"Yes. A custom version should define channel colors, offset distance, trigger behavior, blur limits, typography constraints, mobile tuning, accessibility handling, reduced-motion fallback, source handoff, and implementation notes."}],"access":"Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/chromatic-text","demoUrl":"https://vault.hyperiux.com/demo/chromatic-text","related":[{"slug":"mask-text-reveal","title":"Mask Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/mask-text-reveal"},{"slug":"glitchy-text","title":"Glitchy Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/glitchy-text"},{"slug":"drop-text","title":"Drop Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/drop-text"},{"slug":"text-stream","title":"Text Stream","docsUrl":"https://vault.hyperiux.com/effects/text-animations/text-stream"}]},{"slug":"circle-text-reveal","title":"Circle Text Reveal","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"pro","summary":"A circular mask text animation that reveals short headlines, campaign lines, and proof statements through a focused shape-based entrance.","description":"Circle Text Reveal for React reveals words through a circular mask for campaign headlines where shape is part of the art direction.","tags":["Motion"],"dependencies":["motion"],"install":"npx hyperiux add circle-text-reveal","usage":"import CircleTextReveal from '@/components/effects/circle-text-reveal'\n\nconst page = () => {\n return (\n <>\n
\n \n
\n \n )\n}\n\n\nexport default page","props":[{"name":"textColor","type":"string","default":"#111111","description":"Base text color."},{"name":"circleColorBg","type":"string","default":"#ff5f00","description":"Reveal circle background color."},{"name":"RevealedTextColor","type":"string","default":"#fefefe","description":"Text color inside the revealed layer."},{"name":"lerp","type":"number","default":0.15,"description":"Pointer-follow smoothing amount; higher values track faster."},{"name":"smoothness","type":"number","default":0.5,"description":"Mask-size transition duration in seconds."},{"name":"circleSize","type":"number","default":500,"description":"Expanded reveal circle size in pixels."}],"fixedText":true,"overview":["Circle Text Reveal helps important words arrive with intent: text appears through a circular mask.","Best on short, high-emphasis text: headlines, launch lines, section openers, proof points. Avoid it on body copy, errors, legal text, or instructions, where legibility cannot be negotiable.","The main risk is the text disappearing into the effect. Ship the final phrase as genuine HTML, keep per-character motion out of the accessibility tree, and serve the settled, legible text immediately when motion is reduced."],"exampleUseCase":["An art gallery's exhibition microsite can use Circle Text Reveal on the opening statement. A circle follows the visitor's cursor and uncovers a second line hidden beneath the first, so the page rewards curiosity in the same way the exhibition does.","The outcome is discovery. Because the reveal depends on a mouse, it works best as a desktop moment. On touch devices the main statement still reads in full, and opening hours, tickets, and directions belong in ordinary text elsewhere on the page."],"bestFor":["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."],"notFor":["Avoid it on body copy, labels, error and legal text, or any wording that has to be read on sight."],"performance":["Move only the words that carry weight, pre-reserve their space to avoid shift, and skip costly filters on large text blocks."],"accessibility":["Assistive technology should hear the phrase once, not character by character; visually split fragments are hidden from the accessibility tree with aria-hidden."],"commonMistakes":["Using Circle Text Reveal on long body copy.","Removing the readable text from the DOM.","Letting split text cause layout shift."],"faq":[{"question":"When should I use Circle Text Reveal?","answer":"Use it when a campaign moment needs text appearing through a circular mask."},{"question":"How do I keep Circle Text Reveal accessible?","answer":"Keep the resolved phrase in the DOM, exposed once; mark any duplicated animated fragments hidden from assistive technology."},{"question":"Does Circle Text Reveal affect SEO?","answer":"Not as long as the resolved text is genuine HTML and never trapped in canvas or client-only animation."},{"question":"How do I avoid layout shift with Circle Text Reveal?","answer":"Hold the finished text's footprint so wrapping does not jump between breakpoints."},{"question":"What should reduced motion do for Circle Text Reveal?","answer":"Land directly on the finished, readable text: no character scramble, no stagger, no loop."}],"access":"Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/circle-text-reveal","demoUrl":"https://vault.hyperiux.com/demo/circle-text-reveal","related":[{"slug":"split-canvas","title":"Split Canvas","docsUrl":"https://vault.hyperiux.com/effects/scroll-effects/split-canvas"},{"slug":"circular-split-roll","title":"Circular Split Roll","docsUrl":"https://vault.hyperiux.com/effects/scroll-effects/circular-split-roll"},{"slug":"helix-slider","title":"Helix Slider","docsUrl":"https://vault.hyperiux.com/effects/scroll-effects/helix-slider"},{"slug":"parallax-image-animation","title":"Parallax Image","docsUrl":"https://vault.hyperiux.com/effects/scroll-effects/parallax-image-animation"},{"slug":"sticky-content-wrapper","title":"Sticky Content Wrapper","docsUrl":"https://vault.hyperiux.com/effects/scroll-effects/sticky-content-wrapper"}]},{"slug":"depth-flip-text","title":"Depth Flip Text","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"free","summary":"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.","description":"Depth Flip for React swaps short phrases through a compressed depth-flip motion for hero lines, product claims, and brand statements.","tags":["GSAP"],"dependencies":["@gsap/react","gsap"],"install":"npx hyperiux add depth-flip-text","usage":"import DepthFlipText from \"@/components/effects/depth-flip-text\";\n\nconst page = () => {\n return (\n <>\n \n \n )\n}\n\n\nexport default page","props":[{"name":"phrases","type":"string[]","default":["Hyperiux Vault ships faster","Premium UI for modern teams","Built to launch beautifully"],"description":"Phrases that cycle through the perspective flip."},{"name":"backgroundColor","type":"string","default":"#f6f5f2","description":"Background color behind the effect."},{"name":"textColor","type":"string","default":"#ffffff","description":"Text color for both the current and incoming phrase."},{"name":"loop","type":"boolean","default":true,"description":"Restarts the phrase sequence after the last entry."},{"name":"holdDuration","type":"number","default":0.4,"description":"Delay before each phrase begins its flip transition."},{"name":"transitionDuration","type":"number","default":1.4,"description":"Duration of the flip animation."},{"name":"charStagger","type":"number","default":0.02,"description":"Delay between each character beginning its motion."},{"name":"useOpacityTransition","type":"boolean","default":false,"description":"Fades outgoing and incoming characters during the flip."},{"name":"scrub","type":"boolean","default":false,"description":"Links the first flip transition to scroll progress instead of autoplay."},{"name":"scrollStart","type":"string","default":"top 80%","description":"ScrollTrigger start value used when scrub is enabled."},{"name":"scrollEnd","type":"string","default":"bottom 20%","description":"ScrollTrigger end value used when scrub is enabled."}],"overview":["Depth Flip turns a static headline into a controlled sequence of short statements.","The effect works by transitioning one phrase into another through a layered flip motion. The outgoing line compresses, shifts, or folds through depth while the next phrase resolves into place. It gives the text a spatial handoff without needing a large 3D scene, heavy WebGL layer, or full-screen route transition.","Use Depth Flip when a page needs to rotate between a small set of connected statements: product positioning, campaign claims, launch lines, value propositions, feature labels, or short brand phrases. The page job is compression: say more than one thing in the same visual space without making the visitor read a dense block.","The production risk is over-rotation. A flipping headline can sharpen a hero, but it can also weaken the message if the copy changes too quickly, loops forever, or hides the most important claim. The strongest version uses a small set of phrases that belong to the same argument and lets each one settle long enough to be read."],"exampleUseCase":["A developer-tool landing page can use Depth Flip in the hero to rotate between three related claims: speed, source ownership, and production readiness. Each phrase gets its moment, then hands off to the next without forcing a bulky paragraph above the CTA.","The outcome is density with control. The page can say more than one thing without making the first screen feel crowded.","A studio homepage can use the same effect for a short brand sequence where each phrase defines one part of the promise: craft, motion, and commercial clarity."],"bestFor":["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."],"notFor":["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."],"performance":["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."],"accessibility":["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."],"commonMistakes":["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."],"faq":[{"question":"What is Depth Flip Text?","answer":"Depth Flip is a React text animation that transitions between short phrases using a compressed perspective or flip-style motion."},{"question":"When should I use Depth Flip Text?","answer":"Use it when a hero, campaign section, or product intro needs to rotate between a small set of related claims in the same visual space."},{"question":"How many phrases work best?","answer":"Two to four phrases usually work best. More than that can dilute the message and make the headline feel like an endless loop."},{"question":"Is Depth Flip good for long sentences?","answer":"No. Keep the phrases short. The effect works best when each phrase can be read instantly before the next one appears."},{"question":"How do I keep Depth Flip accessible?","answer":"Expose the meaningful phrase once, hide decorative duplicate layers where needed, and avoid making the animation the only way to understand the message."},{"question":"What should reduced motion do for Depth Flip?","answer":"Show a static phrase, display the full phrase set as normal text, or switch instantly without perspective movement, scale compression, or repeated flipping."},{"question":"Can Depth Flip be used in a hero section?","answer":"Yes. It is strongest in hero sections where the page needs a sharp rotating claim near the main CTA. Keep the timing slow enough for the visitor to read each phrase."},{"question":"Can Hyperiux adapt Depth Flip for a real brand system?","answer":"Yes. A custom version should define phrase strategy, timing, perspective depth, typography rules, layout reservation, accessibility handling, reduced-motion fallback, source handoff, and implementation notes."}],"access":"Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/depth-flip-text","demoUrl":"https://vault.hyperiux.com/demo/depth-flip-text","related":[{"slug":"text-fill-animation","title":"Text Fill Animation","docsUrl":"https://vault.hyperiux.com/effects/text-animations/text-fill-animation"},{"slug":"text-convergence","title":"Text Convergence","docsUrl":"https://vault.hyperiux.com/effects/scroll-effects/text-convergence"},{"slug":"text-stream","title":"Text Stream","docsUrl":"https://vault.hyperiux.com/effects/text-animations/text-stream"}]},{"slug":"drop-text","title":"Drop Text","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"free","summary":"A gravity-led text animation for headlines, intros, and brand moments where the words should feel physical before they become fully readable.","description":"Drop Text for React drops characters into place for hero headlines, editorial intros, and playful brand moments while keeping the final text readable.","tags":["GSAP"],"dependencies":["gsap"],"install":"npx hyperiux add drop-text","usage":"import DropText from \"@/components/effects/drop-text\";\n\nconst page = () => {\n return (\n <>\n \n\n )\n}","props":[{"name":"variant","type":"string","default":"drop","description":"Animation style used for the text entrance."},{"name":"splitBy","type":"string","default":"characters","description":"Text unit used for the drop animation."},{"name":"staggerFrom","type":"string","default":"random","description":"Origin used for the staggered drop sequence."},{"name":"yOffset","type":"number","default":-30,"description":"Starting vertical offset in pixels. Negative values rise from above, positive values drop from below."},{"name":"xOffset","type":"number","default":0,"description":"Starting horizontal offset in pixels."},{"name":"rotate","type":"number","default":0,"description":"Starting rotation in degrees."},{"name":"blur","type":"number","default":0,"description":"Starting blur in pixels."},{"name":"scaleFrom","type":"number","default":1,"description":"Starting scale before the text settles into place."},{"name":"startOpacity","type":"number","default":0,"description":"Starting opacity before the text animates in."},{"name":"duration","type":"number","default":0.4,"description":"Animation duration in seconds."},{"name":"stagger","type":"number","default":0.02,"description":"Delay between each animated text unit."},{"name":"ease","type":"string","default":"power2.out","description":"GSAP easing used by the drop animation."},{"name":"animateOnScroll","type":"boolean","default":false,"description":"Runs the animation when the component enters the viewport."},{"name":"fontSize","type":"number","default":6,"description":"Font size in vw units."},{"name":"fontColor","type":"string","default":"#ffffff","description":"Text color."},{"name":"textAlign","type":"string","default":"center","description":"Text alignment."},{"name":"lineHeight","type":"number","default":1,"description":"Text line height."},{"name":"letterSpacing","type":"number","default":0,"description":"Letter spacing in em units."},{"name":"backgroundColor","type":"string","default":"#101113","description":"Background color behind the text."},{"name":"text","type":"string","default":"Motion Makes Spaces Move","description":"Text to animate; use \\n for line breaks with splitBy lines."}],"overview":["Drop Text turns a short phrase into a physical typographic moment.","Characters separate from their usual position, move with a drop-like motion, and resolve back into a stable line of text. The effect gives the words weight. It feels playful, kinetic, and slightly imperfect in the right way, while still preserving the final phrase as readable copy.","Use Drop Text when a headline needs more personality than a fade, blur, or simple slide. It works for creative portfolios, studio pages, campaign intros, interactive hero sections, and playful product moments where typography can carry a little gravity.","The page job is arrival. The visitor should notice the phrase, understand it, and continue. The animation can make the text feel alive, but it cannot become a reading obstacle."],"exampleUseCase":["A creative studio can use Drop Text on a homepage intro where the brand wants the first line to feel playful and built by hand. The words drop into place, settle, and stay readable before the visitor reaches the CTA.","The outcome is character. The headline feels more memorable without turning the page into a typographic obstacle course."],"bestFor":["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."],"notFor":["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."],"performance":["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."],"accessibility":["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."],"commonMistakes":["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."],"faq":[{"question":"What is Drop Text?","answer":"Drop Text is a React text animation where characters fall, scatter, or settle into place before resolving into a readable phrase."},{"question":"When should I use Drop Text?","answer":"Use it for short headlines, hero statements, campaign intros, and playful brand moments where typography can carry motion without hurting readability."},{"question":"Is Drop Text good for paragraphs?","answer":"No. Use it on short phrases. Paragraphs need reading speed, not falling letters."},{"question":"How do I keep Drop Text accessible?","answer":"Keep the final phrase available as real text and expose it once to assistive technology. Hide duplicated animated character spans when needed."},{"question":"Does Drop Text affect SEO?","answer":"Not when the final phrase renders as real HTML. Avoid putting the only meaningful text inside canvas, SVG paths, or client-only decorative spans."},{"question":"What should reduced motion do for Drop Text?","answer":"Show the final readable phrase immediately or with a very short fade. Remove character drops, rotation, stagger, and repeated motion."},{"question":"Can Hyperiux adapt Drop Text for a real brand system?","answer":"Yes. A custom version should define character behavior, timing, easing, typography rules, layout reservation, accessibility handling, reduced-motion fallback, source handoff, and implementation notes."}],"access":"Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/drop-text","demoUrl":"https://vault.hyperiux.com/demo/drop-text","related":[{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"},{"slug":"text-convergence","title":"Text Convergence","docsUrl":"https://vault.hyperiux.com/effects/scroll-effects/text-convergence"},{"slug":"text-stream","title":"Text Stream","docsUrl":"https://vault.hyperiux.com/effects/text-animations/text-stream"},{"slug":"perspective-text-reveal","title":"Perspective Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/perspective-text-reveal"}]},{"slug":"flickering-text","title":"Flickering Text","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"free","summary":"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.","description":"Flickering Text for React gives large headlines a controlled light-flicker effect for cinematic, cyber, editorial, and launch-page moments.","tags":["GSAP"],"dependencies":["@gsap/react","gsap"],"install":"npx hyperiux add flickering-text","usage":"import FlickeringText from \"@/components/effects/flickering-text\";\n\nconst page = () => {\n return (\n <>\n \n \n )\n}\n\n\nexport default page","props":[{"name":"backgroundColor","type":"string","default":"#0a0a0a","description":"Background color behind the text."},{"name":"textColor","type":"string","default":"#ffffff","description":"Text color."},{"name":"glowColor","type":"string","default":"#ffffff","description":"Glow color when bloom is enabled."},{"name":"wigglesPerSecond","type":"number","default":2,"description":"Noise samples per second that drive the flicker."},{"name":"correlation","type":"number","default":0.5,"description":"How much each character follows the shared flicker lane."},{"name":"minOpacity","type":"number","default":0,"description":"Lowest opacity characters can dip to."},{"name":"minAmount","type":"number","default":-1,"description":"Lower bound of the flicker selector."},{"name":"maxAmount","type":"number","default":1,"description":"Upper bound of the flicker selector."},{"name":"glowIntensity","type":"number","default":1,"description":"Glow strength when bloom is enabled."},{"name":"glowRadius","type":"number","default":1,"description":"Glow spread multiplier."},{"name":"fontSize","type":"number | string","default":"10vw","description":"Font size for the text."},{"name":"fontWeight","type":"number | string","default":600,"description":"Font weight for the text."},{"name":"glow","type":"boolean","default":true,"description":"Turns the extra glow effect on or off."}],"fixedText":true,"overview":["Flickering Text gives display typography a short burst of unstable light.","Letters brighten, dim, stutter, and settle into a readable final state. The effect works because the instability is brief. It creates tension, then gets out of the way before the visitor has to work too hard to read the message.","Use Flickering Text when a headline should feel cinematic, electrical, haunted, technical, or signal-led. It fits dark hero sections, campaign intros, entertainment pages, cyber brands, AI product launches, portfolio openers, and visual storytelling sections where the type can carry a moment of controlled distortion.","The page job is atmosphere. The visitor should feel the mood before reading the rest of the page, but the final headline still needs to be legible, stable, and worth the attention it just demanded."],"exampleUseCase":["A cyber product page can use Flickering Text in the hero to introduce a short headline with controlled instability. The text pulses, settles, and gives the page a darker technical tone before the supporting copy and CTA appear.","The outcome is tension. The brand feels sharper, but the message still resolves into a clear claim.","A film, music, or campaign microsite can use the same effect for an opening title where atmosphere matters before explanation. The flicker earns attention without forcing the whole page into constant motion."],"bestFor":["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."],"notFor":["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."],"performance":["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."],"accessibility":["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."],"commonMistakes":["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."],"faq":[{"question":"What is Flickering Text?","answer":"Flickering Text is a React text animation that makes a headline pulse, dim, brighten, or stutter briefly before settling into a stable readable state."},{"question":"When should I use Flickering Text?","answer":"Use it when a hero, campaign title, or editorial intro needs cinematic, cyber, electrical, or signal-led atmosphere."},{"question":"Is Flickering Text good for body copy?","answer":"No. Flicker belongs on short display text. Body copy should stay stable and easy to read."},{"question":"How do I keep Flickering Text accessible?","answer":"Render the headline as real text, expose it once to assistive technology, and hide decorative duplicate glow layers where needed."},{"question":"Should Flickering Text loop?","answer":"Usually no. It should flicker briefly, resolve, and stop. Continuous blinking quickly becomes distracting and uncomfortable."},{"question":"What should reduced motion do for Flickering Text?","answer":"Show the final stable headline immediately or with a minimal fade. Remove flicker, glow pulses, opacity stutters, and repeated light changes."},{"question":"Can Flickering Text work on mobile?","answer":"Yes, with restraint. Reduce glow intensity, flicker count, blur, and contrast shifts so the headline remains readable on smaller screens."},{"question":"Can Hyperiux adapt Flickering Text for a real brand system?","answer":"Yes. A custom version should define flicker rhythm, glow treatment, contrast limits, trigger behavior, mobile tuning, accessibility handling, reduced-motion fallback, source handoff, and implementation notes."}],"access":"Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/flickering-text","demoUrl":"https://vault.hyperiux.com/demo/flickering-text","related":[{"slug":"drop-text","title":"Drop Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/drop-text"},{"slug":"typing-text","title":"Typing Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/typing-text"},{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"},{"slug":"text-stream","title":"Text Stream","docsUrl":"https://vault.hyperiux.com/effects/text-animations/text-stream"}]},{"slug":"focus-text","title":"Focus Text","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"free","summary":"A focused text reveal for hero statements, editorial intros, product claims, and brand pages where copy should move from atmosphere into clarity.","description":"Focus Text for React sharpens lines into view one by one for hero statements, editorial intros, and brand copy that needs controlled emphasis.","tags":["GSAP"],"dependencies":["gsap"],"install":"npx hyperiux add focus-text","usage":"import FocusText from \"@/components/effects/focus-text\";\n\nconst page = () => {\n return (\n <>\n \n \n )\n}\n\n\nexport default page","props":[{"name":"backgroundColor","type":"string","default":"#000000","description":"Background color."},{"name":"textColor","type":"string","default":"#ffffff","description":"Text color."},{"name":"fontSize","type":"number","default":4.5,"description":"Text size in vw units."},{"name":"characterStagger","type":"number","default":0.05,"description":"Delay between each character reveal."},{"name":"revealDuration","type":"number","default":3.2,"description":"Duration of each character reveal."},{"name":"startScale","type":"number","default":0.4,"description":"Starting scale before characters settle."},{"name":"blurAmount","type":"number","default":18,"description":"Initial blur amount in pixels."},{"name":"holdDuration","type":"number","default":1.2,"description":"Pause duration after the full reveal completes."},{"name":"loop","type":"boolean","default":false,"description":"Automatically replay the animation on a loop."},{"name":"scrub","type":"boolean","default":false,"description":"Links the reveal to scroll progress instead of playing on mount. Disables looping and the replay button."},{"name":"scrollStart","type":"string","default":"top 80%","description":"ScrollTrigger start value used when scrub is enabled."},{"name":"scrollEnd","type":"string","default":"bottom 20%","description":"ScrollTrigger end value used when scrub is enabled."},{"name":"showReplayButton","type":"boolean","default":true,"description":"Shows the built-in replay button inside the component."},{"name":"text","type":"string","default":"Built for seamless interactions.\nDesigned with thoughtful motion.\nMade to feel unforgettable.","description":"Text to reveal; \\n starts a new line."}],"overview":["Focus Text turns a stacked message into a controlled reading sequence.","Each line begins softened, blurred, or visually held back. As the animation progresses, the active line sharpens into full clarity, then the next line receives the same treatment. The result is a quiet progression of attention: one thought comes into focus, then the next, then the complete statement resolves.","Use Focus Text when a page needs to slow the eye without slowing the user. It works for hero copy, campaign statements, portfolio intros, product positioning, studio manifestos, launch lines, and brand-led sections where the writing deserves a measured arrival.","The page job is clarity. The animation should help the visitor read the message in the intended order. It should not turn a simple sentence into a vision test with typography."],"exampleUseCase":["A product landing page can use Focus Text in the hero to introduce a three-line positioning statement. The first line sharpens, the second follows, and the final line resolves the argument before the visitor reaches the CTA.","The outcome is pacing. The message feels intentional without needing a loud transition, a heavy 3D scene, or a full-screen animation that steals attention from the copy.","A creative studio can use the same pattern for a manifesto-style section where each line carries one part of the brand promise: craft, motion, and commercial clarity."],"bestFor":["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."],"notFor":["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."],"performance":["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."],"accessibility":["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."],"commonMistakes":["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."],"faq":[{"question":"What is Focus Text?","answer":"Focus Text is a React text animation that brings lines of copy into clarity one by one using blur, opacity, scale, or focus-style motion."},{"question":"When should I use Focus Text?","answer":"Use it when a short stacked statement needs a controlled reading sequence: hero copy, campaign intros, product claims, studio positioning, or editorial section openers."},{"question":"Is Focus Text the same as Blur Text?","answer":"Not exactly. Blur Text usually reveals a phrase or group of words through a soft blur-in. Focus Text is more sequential: it guides attention line by line as each part of the message sharpens."},{"question":"How much copy should Focus Text include?","answer":"Keep it short. Two to four lines work best. More than that starts to feel like the user is waiting for the page to read itself."},{"question":"How do I keep Focus Text accessible?","answer":"Render the full message as real text and expose it once. Hide decorative duplicate layers from assistive technology where needed, and avoid making screen readers experience the animation sequence."},{"question":"Does Focus Text affect SEO?","answer":"Show the final readable text immediately or with a minimal fade. Remove blur travel, staggered focus movement, scaling, and repeated loops."},{"question":"What should reduced motion do for Focus Text?","answer":"Show the final readable text immediately or with a minimal fade. Remove blur travel, staggered focus movement, scaling, and repeated loops."},{"question":"Can Hyperiux adapt Focus Text for a real brand system?","answer":"Yes. A custom version should define line structure, blur intensity, timing, typography rules, trigger behavior, accessibility handling, mobile tuning, reduced-motion fallback, source handoff, and implementation notes."}],"access":"Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/focus-text","demoUrl":"https://vault.hyperiux.com/demo/focus-text","related":[{"slug":"text-fill-animation","title":"Text Fill Animation","docsUrl":"https://vault.hyperiux.com/effects/text-animations/text-fill-animation"},{"slug":"overflow-text-reveal","title":"Overflow Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/overflow-text-reveal"},{"slug":"perspective-text-reveal","title":"Perspective Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/perspective-text-reveal"},{"slug":"glowing-text","title":"Glowing Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/glowing-text"}]},{"slug":"glitchy-text","title":"Glitchy Text","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"pro","summary":"A cyber-style text animation that fractures characters before resolving them into readable, crawlable headline copy.","description":"Glitchy Text for React fractures characters before resolving for cyber, AI, and developer-tool headlines with edge. Keeps content crawlable and accessible.","tags":["GSAP"],"dependencies":["gsap"],"install":"npx hyperiux add glitchy-text","usage":"import GlitchyText from '@/components/effects/glitchy-text'\n\nconst page = () => {\n return (\n <>\n \n \n )\n}\n\nexport default page","props":[{"name":"baseTextColor","type":"string","default":"#ffffff","description":"Base text layer color."},{"name":"glitchColor","type":"string","default":"#eab308","description":"Accent color for the glitch layers and replay button."},{"name":"stagger","type":"number","default":0.025,"description":"Delay between consecutive characters in seconds."},{"name":"duration","type":"number","default":0.6,"description":"Duration of each character's slide in seconds."},{"name":"ease","type":"string","default":"power2.inOut","description":"GSAP ease for the slide."}],"fixedText":true,"overview":["Glitchy Text helps important words arrive with intent: characters fracture before resolving.","Use it for headlines, launch claims, short section openers, and one-line proof points. Do not use it on long body copy, error messages, legal text, or instructions where legibility is non-negotiable.","The production risk is losing the text to the animation. The final phrase must remain real DOM text, screen readers should not hear every animated character, and reduced-motion users should see the readable final state immediately."],"exampleUseCase":["A hero headline for a studio or product landing page, where the chromatic swap plays once on load and the visitor can trigger it again."],"bestFor":["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."],"notFor":["Not for body copy, labels, error messages, legal copy, or any text users need to read immediately."],"performance":["Animate only the phrase that matters, reserve layout space, and avoid expensive filters over large text blocks."],"accessibility":["Expose the complete phrase once for assistive technology. If characters are split visually, hide duplicated spans with aria-hidden when appropriate."],"commonMistakes":["Using Glitchy Text on long body copy.","Removing the readable text from the DOM.","Letting split text cause layout shift."],"faq":[{"question":"When should I use Glitchy Text?","answer":"Use it when a cyber, AI, or developer-tool headline needs characters fracturing before they resolve."},{"question":"How do I keep Glitchy Text accessible?","answer":"Keep the final phrase in the DOM and expose it once. Hide duplicated animated fragments from assistive technology when needed."},{"question":"Does Glitchy Text affect SEO?","answer":"Not if the final text is real HTML and not hidden inside canvas or client-only animation."},{"question":"How do I avoid layout shift with Glitchy Text?","answer":"Reserve final text space and keep line breaks stable across breakpoints."},{"question":"What should reduced motion do for Glitchy Text?","answer":"Show the final readable state immediately, with no scramble, stagger, or looping motion."}],"access":"Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/glitchy-text","demoUrl":"https://vault.hyperiux.com/demo/glitchy-text","related":[{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"},{"slug":"circle-text-reveal","title":"Circle Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/circle-text-reveal"},{"slug":"mask-text-reveal","title":"Mask Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/mask-text-reveal"},{"slug":"overflow-text-reveal","title":"Overflow Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/overflow-text-reveal"}]},{"slug":"glowing-text","title":"Glowing Text","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"free","summary":"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.","description":"Glowing Text for React reveals letters word by word with a soft active glow for technical intros, launch messages, and premium hero copy.","tags":["CSS"],"dependencies":[],"install":"npx hyperiux add glowing-text","usage":"import GlowingText from \"@/components/effects/glowing-text\";\n\nconst page = () => {\n return (\n <>\n \n \n )\n}\n\n\nexport default page","props":[{"name":"textColor","type":"string","default":"#d8d8d8","description":"Base text color."},{"name":"glowColor","type":"string","default":"#ffffff","description":"Glow and scan color."},{"name":"backgroundColor","type":"string","default":"#0b0d0e","description":"Background color."},{"name":"fontSize","type":"number","default":2.2,"description":"Body text size in vw units."},{"name":"letterSpacing","type":"number","default":0.08,"description":"Letter spacing in em units."},{"name":"lineHeight","type":"number","default":1.55,"description":"Body line height."},{"name":"glowIntensity","type":"number","default":0.7,"description":"Glow strength."},{"name":"characterStagger","type":"number","default":0.045,"description":"Delay between each character starting its reveal."},{"name":"revealDuration","type":"number","default":0.5,"description":"How long each character takes to fade in and settle."},{"name":"lineGap","type":"number","default":0.15,"description":"Extra pause after a line's last word before the next line starts."},{"name":"text","type":"string","default":"Connection established with Hyperiux Vault,\nDecrypting premium component signatures,\nMotion presets verified and ready to ship,\nWelcome in. Build something that glows.","description":"Body text revealed line by line; \\n separates lines."}],"overview":["Glowing Text turns a line of copy into a controlled word-by-word reveal. Characters appear in sequence, the active word carries a soft glow while it forms, and the sentence resolves into a stable readable state.","Use it when a short message needs to feel transmitted, activated, or unlocked without becoming a fake loader. It fits technical intros, AI product sections, cybersecurity pages, private-beta moments, and dark hero panels where the text should arrive with rhythm.","The page job is controlled anticipation. The visitor should feel the message arriving with intent, but the final copy still needs to land quickly, remain readable, and stop moving once the idea has been delivered."],"exampleUseCase":["A cybersecurity landing page can use Glowing Text in a hero panel to introduce a short trust sequence: connection established, policy verified, assets protected, access granted. The animation makes the copy feel procedural without replacing the actual security explanation.","The outcome is signal. The product feels technical and composed before the visitor reaches the main CTA, but the message still resolves into clear readable copy.","A developer-tool page can use the same pattern to introduce CLI setup or component readiness. The glow gives the system voice a premium edge without needing a heavy WebGL scene."],"bestFor":["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."],"notFor":["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."],"performance":["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."],"accessibility":["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."],"commonMistakes":["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."],"faq":[{"question":"What is Glowing Text?","answer":"Glowing Text is a React text animation where letters appear sequentially and the active word glows while it is being formed."},{"question":"Is Glowing Text the same as Typing Text?","answer":"Not exactly. Typing Text focuses on the character-by-character typewriter rhythm. Glowing Text adds a word-level visual glow during arrival, making the reveal feel more atmospheric and premium."},{"question":"When should I use Glowing Text?","answer":"Use it for short technical intros, launch messages, AI or cybersecurity hero panels, product-status sequences, and dark landing-page moments where copy should feel transmitted or verified."},{"question":"Should Glowing Text highlight only important words?","answer":"No. The glow is part of the reveal behavior, not a selective emphasis system. If specific keywords need emphasis, use a different text treatment or combine the final state with a clear typographic hierarchy."},{"question":"How do I keep Glowing Text accessible?","answer":"Render the final message as real text and expose it once. Hide decorative character or glow layers from assistive technology where needed, and avoid announcing every animated letter."},{"question":"Does Glowing Text affect SEO?","answer":"Not if the final copy renders as real HTML. Avoid trapping the meaningful text inside canvas, images, or client-only decorative fragments."},{"question":"What should reduced motion do for Glowing Text?","answer":"Show the final readable message immediately or with a short fade. Remove character sequencing, glow progression, cursor blinking, and repeated loops."},{"question":"Can Hyperiux adapt Glowing Text for a real brand system?","answer":"Yes. A custom version should define message structure, character timing, word glow behavior, typography rules, accessibility handling, mobile tuning, reduced-motion fallback, source handoff, and implementation notes."}],"access":"Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/glowing-text","demoUrl":"https://vault.hyperiux.com/demo/glowing-text","related":[{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"},{"slug":"typing-text","title":"Typing Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/typing-text"},{"slug":"drop-text","title":"Drop Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/drop-text"},{"slug":"chromatic-text","title":"Chromatic Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/chromatic-text"}]},{"slug":"mask-text-reveal","title":"Mask Text Reveal","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"pro","summary":"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.","description":"Mask Text Reveal for React wipes real DOM text in through angled masks for polished SaaS headlines and section intros. Falls back to a simple fade for reduced motion.","tags":["GSAP"],"dependencies":["gsap"],"install":"npx hyperiux add mask-text-reveal","usage":"import MaskTextReveal from \"@/components/effects/mask-text-reveal\";\n\nconst page = () => {\n return (\n <>\n \n

\n Pull the words from the noise.\n

\n \n\n )\n}","props":[{"name":"animateOnScroll","type":"boolean","default":true,"description":"Runs reveal on scroll."},{"name":"stagger","type":"number","default":0.2,"description":"Delay between animated lines."},{"name":"duration","type":"number","default":5.5,"description":"Mask reveal duration."},{"name":"delay","type":"number","default":0,"description":"Animation delay."},{"name":"scrub","type":"boolean","default":false,"description":"Links the reveal to scroll progress."},{"name":"maskAngle","type":"number","default":150,"description":"Angle of the wipe in degrees."},{"name":"maskSoftness","type":"number","default":33.3,"description":"Softness of the wipe's edge, as a % of the gradient (0 = hard edge)."},{"name":"textColor","type":"string","default":"#ffffff","description":"Text color. Unset inherits from the surrounding text."}],"overview":["Mask Text Reveal helps important words arrive with intent: each line is wiped in through a soft, angled mask.","Reach for it on headlines, launch claims, section openers, and one-line proof. Keep it away from body copy, error messages, legal text, and instructions, where reading has to be effortless.","The risk in production is that the words get lost in the motion. The resolved phrase has to be real DOM text, the animation must not spell itself out to a screen reader, and a reduced-motion visitor should get the final, readable text with a simple fade."],"exampleUseCase":["A B2B fintech homepage can use Mask Text Reveal for its hero headline and the short intros above each feature section. Each line is wiped into view through a soft, angled mask, one after another, so a two or three line claim arrives in a controlled order.","The outcome is clarity. The motion feels clean and finished rather than playful, which suits a product that has to earn trust, and the headline settles into ordinary text that stays readable and indexable."],"bestFor":["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."],"notFor":["Not for body text, labels, errors, legal copy, or anything a user must read right away."],"performance":["Limit motion to the phrase that earns it, hold its layout space ahead of time, and keep heavy filters off large blocks of text."],"accessibility":["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."],"commonMistakes":["Using Mask Text Reveal on long body copy.","Removing the readable text from the DOM.","Letting split text cause layout shift."],"faq":[{"question":"When should I use Mask Text Reveal?","answer":"Use it when a polished SaaS section needs lines wiping in through a clean, angled mask."},{"question":"How do I keep Mask Text Reveal accessible?","answer":"Ship the final phrase in the DOM and surface it a single time, hiding duplicated animated fragments from assistive technology where needed."},{"question":"Does Mask Text Reveal affect SEO?","answer":"Not when the final text ships as real HTML rather than living inside canvas or client-only animation."},{"question":"How do I avoid layout shift with Mask Text Reveal?","answer":"Pre-reserve the final text's space so line breaks stay put across breakpoints."},{"question":"What should reduced motion do for Mask Text Reveal?","answer":"The component skips the mask wipe and fades the settled, legible text in as one block, with no scrambling, staggering, or looping."}],"access":"Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/mask-text-reveal","demoUrl":"https://vault.hyperiux.com/demo/mask-text-reveal","related":[{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"},{"slug":"circle-text-reveal","title":"Circle Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/circle-text-reveal"},{"slug":"glitchy-text","title":"Glitchy Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/glitchy-text"},{"slug":"overflow-text-reveal","title":"Overflow Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/overflow-text-reveal"}]},{"slug":"number-counter","title":"Number Counter","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"free","summary":"Give important numbers a visible moment of arrival, so metrics feel noticed without becoming noisy or hard to trust.","description":"Number Counter for React animates numbers into readable proof for metrics, launch stats, and product results while keeping the final value crawlable.","tags":["GSAP"],"dependencies":["gsap"],"install":"npx hyperiux add number-counter","usage":"import NumberCounter from '@/components/effects/number-counter';\n\nconst page = () => {\n return (\n <>\n \n \n )\n}","props":[{"name":"duration","type":"number","default":1.5,"description":"Digit roll duration in seconds for all three counters."},{"name":"stagger","type":"number","default":0.1,"description":"Delay between digit columns in seconds for all three counters."},{"name":"textColor","type":"string","default":"#021A54","description":"Counter text color for all three counters."}],"fixedText":true,"overview":["Number Counter gives numbers a moment of arrival. The metric does not just appear; it resolves into proof.","Use Number Counter when a number deserves attention: revenue lift, active users, conversion improvement, uptime, launch progress, speed gain, or product adoption. The page job is proof: the animation should make the figure feel noticed, not make it harder to read.","The production risk is credibility. A counter that spins too long, loops forever, or animates every number on the page starts to feel like theatre around evidence. The final value must settle quickly, remain readable as real text, and avoid pretending that decorative motion is data."],"exampleUseCase":["A SaaS landing page can use Number Counter in a proof band below the hero: onboarding lift, deployment time saved, and uptime. The outcome is credibility: the numbers get a controlled beat of attention before the visitor reaches the CTA."],"bestFor":["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."],"notFor":["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."],"performance":["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."],"accessibility":["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."],"commonMistakes":["Animating every statistic on the page.","Letting the number shift layout as digits change.","Making the animation more memorable than the metric."],"faq":[{"question":"When should I use Number Counter?","answer":"Use Number Counter when a small number of metrics needs a clear arrival moment: proof bands, launch stats, adoption numbers, or product outcomes."},{"question":"Should Number Counter loop?","answer":"No. Metrics should resolve, settle, and stay readable. Looping proof figures makes them feel decorative instead of trustworthy."},{"question":"How should Number Counter handle large values?","answer":"Format values clearly with suffixes, separators, or units. Reserve enough width for the final value so the layout does not jump during animation."},{"question":"Does Number Counter affect SEO?","answer":"Not if the final number and label render as real HTML. Avoid hiding the only meaningful value inside client-only animation."},{"question":"What should reduced motion do for Number Counter?","answer":"Show the final value immediately, or use a minimal fade. Do not roll digits, scramble values, or run a long count-up sequence."},{"question":"Can Hyperiux adapt Number Counter for a real brand system?","answer":"Yes. A custom version should define number formatting, motion timing, proof hierarchy, accessibility behavior, reduced-motion fallback, source handoff, and implementation notes."}],"access":"Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/number-counter","demoUrl":"https://vault.hyperiux.com/demo/number-counter","related":[{"slug":"text-fill-animation","title":"Text Fill Animation","docsUrl":"https://vault.hyperiux.com/effects/text-animations/text-fill-animation"},{"slug":"text-convergence","title":"Text Convergence","docsUrl":"https://vault.hyperiux.com/effects/scroll-effects/text-convergence"},{"slug":"character-trail","title":"Character Trail","docsUrl":"https://vault.hyperiux.com/effects/cursor-effects/character-trail"},{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"}]},{"slug":"overflow-text-reveal","title":"Overflow Text Reveal","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"pro","summary":"A clipped text reveal animation that lifts short copy into view without disturbing layout, readability, or page structure.","description":"Overflow Text Reveal for React lifts text into view without layout chaos for landing pages that need readable motion. Mobile and reduced-motion paths included.","tags":["GSAP"],"dependencies":["gsap"],"install":"npx hyperiux add overflow-text-reveal","usage":"import OverflowTextReveal from \"@/components/effects/overflow-text-reveal\";\n\nexport default function Page() {\n return (\n<>\n \n

\n Characters
Rise From
Below\n

\n \n\n)\n\n}","props":[{"name":"animateOnScroll","type":"boolean","default":true,"description":"Runs the reveal when scrolled into view."},{"name":"delay","type":"number","default":0,"description":"Animation delay."},{"name":"scrub","type":"boolean","default":false,"description":"Links the animation to scroll progress."},{"name":"direction","type":"string","default":"bottom","description":"Reveal direction."},{"name":"splitBy","type":"string","default":"words","description":"Animate per character, per word, or per line (each piece is masked)."},{"name":"startOpacity","type":"number","default":0,"description":"Opacity each piece starts from before it reveals."},{"name":"startRotation","type":"number","default":8,"description":"Starting tilt in degrees; the sign follows the direction."},{"name":"duration","type":"number","default":0.5,"description":"Duration of each piece's reveal in seconds."},{"name":"stagger","type":"number","default":0.03,"description":"Delay between consecutive pieces in seconds."},{"name":"ease","type":"string","default":"power3.out","description":"GSAP ease for the reveal."}],"overview":["Overflow Text Reveal helps important words arrive with intent: text lifts into view without layout chaos.","Use it for headlines, launch claims, short section openers, and one-line proof points. Do not use it on long body copy, error messages, legal text, or instructions where legibility is non-negotiable.","The thing to watch is losing the text to the animation. The final phrase must remain real DOM text, screen readers should not hear every animated character, and reduced-motion users should see the readable final state immediately."],"exampleUseCase":["A furniture ecommerce store can use Overflow Text Reveal on collection landing pages, for headlines such as a new season's name or a short line about craft. The words lift into place from behind a clipped edge as the section scrolls into view, without pushing the layout around.","The outcome is restraint. The page gains a sense of arrival while product grids, prices, and delivery details stay as static content that shoppers can scan straight away."],"bestFor":["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."],"notFor":["Not for body copy, labels, error messages, legal copy, or any text users need to read immediately."],"performance":["Animate only the phrase that matters, reserve layout space, and avoid expensive filters over large text blocks."],"accessibility":["Expose the complete phrase once for assistive technology. If characters are split visually, hide duplicated spans with aria-hidden when appropriate."],"commonMistakes":["Using Overflow Text Reveal on long body copy.","Removing the readable text from the DOM.","Letting split text cause layout shift."],"faq":[{"question":"When should I use Overflow Text Reveal?","answer":"Use it when a clean landing page needs text lifting into view without layout chaos."},{"question":"How do I keep Overflow Text Reveal accessible?","answer":"Keep the final phrase in the DOM and expose it once. Hide duplicated animated fragments from assistive technology when needed."},{"question":"Does Overflow Text Reveal affect SEO?","answer":"Not if the final text is real HTML and not hidden inside canvas or client-only animation."},{"question":"How do I avoid layout shift with Overflow Text Reveal?","answer":"Reserve final text space and keep line breaks stable across breakpoints."},{"question":"What should reduced motion do for Overflow Text Reveal?","answer":"Show the final readable state immediately, with no scramble, stagger, or looping motion."}],"access":"Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/overflow-text-reveal","demoUrl":"https://vault.hyperiux.com/demo/overflow-text-reveal","related":[{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"},{"slug":"circle-text-reveal","title":"Circle Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/circle-text-reveal"},{"slug":"glitchy-text","title":"Glitchy Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/glitchy-text"},{"slug":"mask-text-reveal","title":"Mask Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/mask-text-reveal"}]},{"slug":"perspective-text-reveal","title":"Perspective Text Reveal","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"pro","summary":"A spatial text reveal animation that gives headlines and launch claims a subtle depth-led arrival.","description":"Perspective Text Reveal for React gives headlines spatial arrival for campaign sections and portfolio intros. Ships with a reduced-motion fallback.","tags":["GSAP"],"dependencies":["gsap"],"install":"npx hyperiux add perspective-text-reveal","usage":"import PerspectiveTextReveal from \"@/components/effects/perspective-text-reveal\";\n\nconst page = () => {\n return (\n <>\n \n

\n Lines fall into depth.\n

\n \n \n )\n}","props":[{"name":"animateOnScroll","type":"boolean","default":true,"description":"Runs reveal on scroll."},{"name":"delay","type":"number","default":0,"description":"Animation delay in seconds."},{"name":"duration","type":"number","default":0.8,"description":"Line reveal duration in seconds."},{"name":"stagger","type":"number","default":0.08,"description":"Delay between revealed lines."},{"name":"scrub","type":"boolean","default":false,"description":"Links the reveal to scroll progress."},{"name":"startOpacity","type":"number","default":0,"description":"Opacity the text starts from before it reveals."},{"name":"direction","type":"string","default":"top","description":"Side the text swings in from."},{"name":"splitBy","type":"string","default":"lines","description":"Animate per character, per word, or per line."},{"name":"rotation","type":"number","default":70,"description":"Starting tilt in degrees; its sign follows the direction."},{"name":"ease","type":"string","default":"power3.out","description":"GSAP ease for the reveal."},{"name":"perspective","type":"number","default":800,"description":"Perspective distance in px - lower values give a stronger 3D effect."}],"overview":["Perspective Text Reveal helps important words arrive with intent: letters arrive with depth.","Reach for it on headlines, launch claims, section openers, and one-line proof. Keep it away from body copy, error messages, legal text, and instructions, where reading has to be effortless.","The main risk is that the words get lost in the motion. The resolved phrase has to be real DOM text, the animation must not spell itself out to a screen reader, and a reduced-motion visitor should land on the final, readable state at once."],"exampleUseCase":["A boutique hotel website can use Perspective Text Reveal for the short lines that introduce rooms, dining, and the spa. Each line rotates out of depth into place as the section comes into view, giving the copy a quiet, dimensional entrance that fits a premium brand.","The outcome is presence. The headings feel crafted without slowing the visitor down, and room rates, booking dates, and policies remain plain text that reads immediately."],"bestFor":["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."],"notFor":["Not for body text, labels, errors, legal copy, or anything a user must read right away."],"performance":["Limit motion to the phrase that earns it, hold its layout space ahead of time, and keep heavy filters off large blocks of text."],"accessibility":["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."],"commonMistakes":["Using Perspective Text Reveal on long body copy.","Removing the readable text from the DOM.","Letting split text cause layout shift."],"faq":[{"question":"When should I use Perspective Text Reveal?","answer":"Use it when a headline needs letters arriving with depth."},{"question":"How do I keep Perspective Text Reveal accessible?","answer":"Ship the final phrase in the DOM and surface it a single time, hiding duplicated animated fragments from assistive technology where needed."},{"question":"Does Perspective Text Reveal affect SEO?","answer":"Not when the final text ships as real HTML rather than living inside canvas or client-only animation."},{"question":"How do I avoid layout shift with Perspective Text Reveal?","answer":"Pre-reserve the final text's space so line breaks stay put across breakpoints."},{"question":"What should reduced motion do for Perspective Text Reveal?","answer":"Render the settled, legible text at once, with no scrambling, staggering, or looping."}],"access":"Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/perspective-text-reveal","demoUrl":"https://vault.hyperiux.com/demo/perspective-text-reveal","related":[{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"},{"slug":"circle-text-reveal","title":"Circle Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/circle-text-reveal"},{"slug":"glitchy-text","title":"Glitchy Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/glitchy-text"},{"slug":"mask-text-reveal","title":"Mask Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/mask-text-reveal"}]},{"slug":"pixel-text-fill","title":"Pixel Text Fill","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"free","summary":"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.","description":"Pixel Text Fill for React turns pixelated text into fully filled typography as users scroll, giving headlines a digital reveal without losing readability.","tags":["GSAP"],"dependencies":["gsap"],"install":"npx hyperiux add pixel-text-fill","usage":"import PixelTextFill from \"@/components/effects/pixel-text-fill\";\n\nconst page = () => {\n return (\n <>\n \n\n )\n}","props":[{"name":"direction","type":"string","default":"up","description":"Fill direction."},{"name":"pixelSize","type":"number","default":3,"description":"Pixel cell size used by the dither edge."},{"name":"stagger","type":"number","default":32,"description":"Character stagger window for the fill head."},{"name":"bandFraction","type":"number","default":1.15,"description":"Soft pixel band width as a fraction of each glyph."},{"name":"effectWidth","type":"number","default":1.4,"description":"Pixelated fill band width multiplier."},{"name":"settleBlend","type":"number","default":0.45,"description":"How early the final text color blends in behind the pixel edge."},{"name":"textColor","type":"string","default":"#ffffff","description":"Final text color."},{"name":"primaryColor","type":"string","default":"#ff5f00","description":"Pixel dither edge color."},{"name":"dimColor","type":"string","default":"#272727","description":"Initial dim text color."},{"name":"backgroundColor","type":"string","default":"#101113","description":"Section background color."},{"name":"fontSize","type":"number","default":3.2,"description":"Font size in vw units."},{"name":"fontWeight","type":"number","default":500,"description":"Font weight."},{"name":"lineHeight","type":"number","default":1.18,"description":"Text line height."},{"name":"textAlign","type":"string","default":"center","description":"Text alignment."},{"name":"maxWidth","type":"number","default":80,"description":"Text wrapper width as a percentage of the section."},{"name":"text","type":"string","default":"Build with calm motion.\nKeep the rhythm crisp and clear.\nMake each screen feel alive.\nLet every detail guide focus.","description":"Text drawn and filled on canvas; \\n forces line breaks."}],"overview":["Pixel Text Fill makes text feel like it is being assembled in front of the visitor.","The words begin in a pixelated, incomplete, or block-fragmented state. As the user scrolls, the fill becomes stronger, cleaner, and more complete until the text resolves into solid readable typography. The movement gives the headline a digital sense of construction: the message starts as texture, then becomes signal.","Use Pixel Text Fill when a page needs to turn a headline into a moment of resolution. It works for AI products, developer tools, cybersecurity pages, gaming-adjacent brands, creative portfolios, technical launches, and experimental landing pages where pixel language fits the product or visual system.","The page job is transformation. The visitor should feel the text moving from fragmented to complete, but the final message still has to arrive quickly, stay readable, and support the page argument. Pixelation is the entrance. The readable sentence is the point."],"exampleUseCase":["A developer-tool homepage can use Pixel Text Fill in the hero or first proof section to make the headline resolve as the visitor scrolls. The phrase begins as fragmented pixel texture, then fills into a clear claim as the section comes into focus.","The outcome is signal. The page visually moves from low-resolution noise to a complete product message, which fits technical brands that want the interface to feel constructed, computed, or unlocked.","A creative portfolio can use the same effect for a project intro where the first line should feel digital before it becomes fully legible."],"bestFor":["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."],"notFor":["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."],"performance":["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."],"accessibility":["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."],"commonMistakes":["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."],"faq":[{"question":"What is Pixel Text Fill?","answer":"Pixel Text Fill is a React text animation where typography starts in a pixelated or fragmented fill state and becomes fully filled as the user scrolls."},{"question":"When should I use Pixel Text Fill?","answer":"Use it for short headlines, hero statements, and technical brand moments where the message should resolve from digital noise into readable clarity."},{"question":"Is Pixel Text Fill a keyword highlight effect?","answer":"No. Pixel Text Fill affects the full text reveal. The words move from pixelated or partially filled to solid and readable. It is not meant to highlight only selected keywords."},{"question":"Should Pixel Text Fill be scroll-driven?","answer":"It works especially well when tied to scroll because the user physically resolves the text. It can also be triggered on entry, but scroll gives the effect a stronger sense of progression."},{"question":"How do I keep Pixel Text Fill accessible?","answer":"Render the final phrase as real text and expose it once to assistive technology. Hide decorative pixel layers or duplicated fragments where needed."},{"question":"Does Pixel Text Fill affect SEO?","answer":"Not if the final text renders as real HTML. Avoid putting the only meaningful copy inside canvas, image layers, or decorative pixel fragments."},{"question":"What should reduced motion do for Pixel Text Fill?","answer":"Show the final fully filled text immediately or with a minimal fade. Remove scroll-linked pixel progression, fragmented fill movement, and repeated animation."},{"question":"Can Hyperiux adapt Pixel Text Fill for a real brand system?","answer":"Yes. A custom version should define pixel density, scroll progress, fill timing, typography rules, contrast limits, mobile behavior, accessibility handling, reduced-motion fallback, source handoff, and implementation notes."}],"access":"Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/pixel-text-fill","demoUrl":"https://vault.hyperiux.com/demo/pixel-text-fill","related":[{"slug":"scramble-text","title":"Scramble Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/scramble-text"},{"slug":"drop-text","title":"Drop Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/drop-text"},{"slug":"text-fill-animation","title":"Text Fill Animation","docsUrl":"https://vault.hyperiux.com/effects/text-animations/text-fill-animation"}]},{"slug":"rectangular-text-reveal","title":"Rectangular Text Reveal","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"free","summary":"A boxed-mask text reveal that introduces short statements through a rectangular frame for graphic brand and campaign sections.","description":"Rectangular Text Reveal for React uses a boxed mask to reveal short statements for graphic brand and campaign sections. Includes a clean mobile fallback.","tags":["GSAP"],"dependencies":["gsap"],"install":"npx hyperiux add rectangular-text-reveal","usage":"import RectangularTextReveal from \"@/components/effects/rectangular-text-reveal\";\n\nexport default function Page() {\n return (\n \n

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

\n \n );\n}","props":[{"name":"baseColor","type":"string","default":"#ea580c","description":"Base reveal rectangle color."},{"name":"overlayColor","type":"string","default":"#111111","description":"Overlay reveal rectangle color."},{"name":"useOverlay","type":"boolean","default":true,"description":"Enables the overlay pass."},{"name":"stagger","type":"number","default":0.2,"description":"Delay between line reveals."},{"name":"coverDuration","type":"number","default":0.34,"description":"Cover animation duration."},{"name":"revealDuration","type":"number","default":0.42,"description":"Reveal animation duration."},{"name":"direction","type":"string","default":"left","description":"Reveal direction."},{"name":"overlayEnterDuration","type":"number","default":0.24,"description":"Overlay rectangle cover duration in seconds."},{"name":"overlayExitDuration","type":"number","default":0.28,"description":"Overlay rectangle uncover duration in seconds."}],"overview":["Rectangular Text Reveal helps important words arrive with intent: a rectangular mask controls the entrance.","Best on short, high-emphasis text: headlines, launch lines, section openers, proof points. Avoid it on body copy, errors, legal text, or instructions, where legibility cannot be negotiable.","The production risk is the text disappearing into the effect. Ship the final phrase as genuine HTML, keep per-character motion out of the accessibility tree, and serve the settled, legible text immediately when motion is reduced."],"exampleUseCase":["A music festival site can use Rectangular Text Reveal for its lineup announcement and section headers. Each line is covered by a solid block in the festival colors, which then pulls away to leave the text in place, line after line.","The outcome is impact. The reveal matches the bold, block-based look of the festival's print campaign, while dates, ticket tiers, and venue rules stay as plain text that reads on sight."],"bestFor":["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."],"notFor":["Avoid it on body copy, labels, error and legal text, or any wording that has to be read on sight."],"performance":["Move only the words that carry weight, pre-reserve their space to avoid shift, and skip costly filters on large text blocks."],"accessibility":["Assistive technology should hear the phrase once, not character by character; visually split fragments are hidden from the accessibility tree with aria-hidden."],"commonMistakes":["Using Rectangular Text Reveal on long body copy.","Removing the readable text from the DOM.","Letting split text cause layout shift."],"faq":[{"question":"When should I use Rectangular Text Reveal?","answer":"Use it when a heading needs a rectangular mask controlling its entrance."},{"question":"How do I keep Rectangular Text Reveal accessible?","answer":"Keep the resolved phrase in the DOM, exposed once; mark any duplicated animated fragments hidden from assistive technology."},{"question":"Does Rectangular Text Reveal affect SEO?","answer":"Not as long as the resolved text is genuine HTML and never trapped in canvas or client-only animation."},{"question":"How do I avoid layout shift with Rectangular Text Reveal?","answer":"Hold the finished text's footprint so wrapping does not jump between breakpoints."},{"question":"What should reduced motion do for Rectangular Text Reveal?","answer":"Land directly on the finished, readable text: no character scramble, no stagger, no loop."}],"access":"Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/rectangular-text-reveal","demoUrl":"https://vault.hyperiux.com/demo/rectangular-text-reveal","related":[{"slug":"overflow-text-reveal","title":"Overflow Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/overflow-text-reveal"},{"slug":"text-convergence","title":"Text Convergence","docsUrl":"https://vault.hyperiux.com/effects/scroll-effects/text-convergence"},{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"},{"slug":"rolling-text","title":"Rolling Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/rolling-text"},{"slug":"focus-text","title":"Focus Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/focus-text"}]},{"slug":"rolling-text","title":"Rolling Text","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"free","summary":"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.","description":"Rolling Text for React rotates characters into place for logos, hero words, and technical headlines while keeping the final phrase readable.","tags":["GSAP"],"dependencies":["@gsap/react","gsap"],"install":"npx hyperiux add rolling-text","usage":"import RollingText from \"@/components/effects/rolling-text\";\n\nconst page = () => {\n return (\n <>\n \n \n )\n}\n\nexport default page","props":[{"name":"text","type":"string","default":"HYPERIUX","description":"The word rendered by the reel."},{"name":"textColor","type":"string","default":"#ffffff","description":"Letter color."},{"name":"minCycles","type":"number","default":3,"description":"Minimum whole letter-heights a character travels before landing."},{"name":"cycleVariance","type":"number","default":3,"description":"Extra random cycles added on top of minCycles."},{"name":"duration","type":"number","default":2.4,"description":"Base spin duration in seconds."},{"name":"durationVariance","type":"number","default":1.2,"description":"Extra random duration added per character, in seconds."}],"overview":["Rolling Text turns a short word or phrase into a controlled character reveal.","Each letter moves through a rolling transition before settling into its final position. The effect can feel like a slot mechanism, system readout, rotating glyph strip, or mechanical title sequence depending on timing and typography. The final state is the important part: the word resolves cleanly and stays readable.","Use Rolling Text when a brand word, product name, headline fragment, or short label deserves a sharper arrival. It works for developer tools, AI products, cyber interfaces, portfolio intros, launch pages, studio identities, and experimental hero sections where the typography should feel constructed, technical, or engineered.","The page job is identity. The visitor should remember the word, not the effort it took to read it. Rolling motion is useful when it gives the text presence. It becomes friction when the word keeps moving after the message has already landed."],"exampleUseCase":["A developer-tool homepage can use Rolling Text on the product name or primary hero word. The characters roll into place, resolve quickly, and give the brand name a technical, deliberate entrance before the supporting copy and CTA appear.","The outcome is memorability. The word feels constructed without becoming a puzzle.","A creative studio can use the same effect for project category labels, launch titles, or selected campaign headings where the typography needs a little mechanical energy without becoming a full kinetic sequence."],"bestFor":["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."],"notFor":["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."],"performance":["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."],"accessibility":["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."],"commonMistakes":["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."],"faq":[{"question":"What is Rolling Text?","answer":"Rolling Text is a React text animation where letters roll, cycle, or shift into position before resolving into a readable word or short phrase."},{"question":"When should I use Rolling Text?","answer":"Use it for product names, logo-style text, short hero words, launch titles, and technical brand moments where the text should feel assembled or activated."},{"question":"Is Rolling Text good for long headlines?","answer":"No. Rolling Text works best on short display copy. Long headlines become harder to read when every character has to perform before the sentence lands."},{"question":"How do I keep Rolling Text accessible?","answer":"Render the final phrase as real text and expose it once. Hide duplicated rolling layers or decorative character fragments from assistive technology where needed."},{"question":"Does Rolling Text affect SEO?","answer":"Not if the final text renders as real HTML. Avoid placing the meaningful word only inside canvas, image layers, or decorative animation fragments."},{"question":"Should Rolling Text loop?","answer":"Usually no. Let the word roll in, settle, and stay readable. Looping should be reserved for controlled demo or decorative contexts, not primary page copy."},{"question":"What should reduced motion do for Rolling Text?","answer":"Show the final word immediately or with a minimal fade. Remove rolling movement, character cycling, stagger, and repeated replay."},{"question":"Can Hyperiux adapt Rolling Text for a real brand system?","answer":"Yes. A custom version should define typography rules, roll direction, stagger timing, character behavior, layout reservation, accessibility handling, mobile tuning, reduced-motion fallback, source handoff, and implementation notes."}],"access":"Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/rolling-text","demoUrl":"https://vault.hyperiux.com/demo/rolling-text","related":[{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"},{"slug":"text-convergence","title":"Text Convergence","docsUrl":"https://vault.hyperiux.com/effects/scroll-effects/text-convergence"},{"slug":"text-stream","title":"Text Stream","docsUrl":"https://vault.hyperiux.com/effects/text-animations/text-stream"}]},{"slug":"scramble-text","title":"Scramble Text","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"pro","summary":"A decode-style text animation where characters scramble briefly before resolving into readable, crawlable HTML text.","description":"Scramble Text for React: characters scramble, then resolve into real, crawlable HTML. Best for AI and developer-tool headlines, with a static fallback.","tags":["GSAP"],"dependencies":["gsap"],"install":"npx hyperiux add scramble-text","usage":"import ScrambleText from \"@/components/effects/scramble-text\";\n\nconst page = () => {\n return (\n <>\n \n \n )\n}","props":[{"name":"speed","type":"number","default":0.6,"description":"Scramble character cycling speed."},{"name":"charType","type":"string","default":"uppercase","description":"Character set used while scrambling."},{"name":"textColor","type":"string","default":"#111111","description":"Text color."},{"name":"align","type":"string","default":"left","description":"Text alignment."},{"name":"duration","type":"number","default":0.7,"description":"Scramble reveal duration in seconds."},{"name":"stagger","type":"number","default":0.04,"description":"Delay between scrambled characters."},{"name":"textSize","type":"number","default":6,"description":"Headline size in vw (clamped between 2rem and 9rem)."},{"name":"initialOpacity","type":"number","default":0,"description":"Opacity of the characters before they decode (0 = hidden, 1 = fully visible)."}],"fixedText":true,"overview":["Scramble Text helps important words arrive with intent: letters resolve from noise into meaning.","Use it for headlines, launch claims, short section openers, and one-line proof points. Do not use it on long body copy, error messages, legal text, or instructions where legibility is non-negotiable.","The risk in production is losing the text to the animation. The final phrase must remain real DOM text, screen readers should not hear every animated character, and reduced-motion users should see the readable final state immediately."],"exampleUseCase":["An AI startup can use Scramble Text on its launch headline. When the line scrolls into view, each character cycles through random characters before settling, so the claim resolves from noise into a clear statement about what the model does.","The outcome is signal. The effect plays once and then leaves crawlable HTML text in place, so the headline still works for search and for visitors who arrive after the animation has finished."],"bestFor":["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."],"notFor":["Not for body copy, labels, error messages, legal copy, or any text users need to read immediately."],"performance":["Animate only the phrase that matters, reserve layout space, and avoid expensive filters over large text blocks."],"accessibility":["Expose the complete phrase once for assistive technology. If characters are split visually, hide duplicated spans with aria-hidden when appropriate."],"commonMistakes":["Using Scramble Text on long body copy.","Removing the readable text from the DOM.","Letting split text cause layout shift."],"faq":[{"question":"When should I use Scramble Text?","answer":"Use it when a technical header needs letters resolving from noise into meaning."},{"question":"How do I keep Scramble Text accessible?","answer":"Keep the final phrase in the DOM and expose it once. Hide duplicated animated fragments from assistive technology when needed."},{"question":"Does Scramble Text affect SEO?","answer":"Not if the final text is real HTML and not hidden inside canvas or client-only animation."},{"question":"How do I avoid layout shift with Scramble Text?","answer":"Reserve final text space and keep line breaks stable across breakpoints."},{"question":"What should reduced motion do for Scramble Text?","answer":"Show the final readable state immediately, with no scramble, stagger, or looping motion."},{"question":"Can Hyperiux adapt Scramble Text for a real brand system?","answer":"Yes. A custom version should define motion rules, visual treatment, performance budget, fallback behavior, source handoff, and implementation notes for the specific page or launch context."}],"access":"Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/scramble-text","demoUrl":"https://vault.hyperiux.com/demo/scramble-text","related":[{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"},{"slug":"circle-text-reveal","title":"Circle Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/circle-text-reveal"},{"slug":"glitchy-text","title":"Glitchy Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/glitchy-text"},{"slug":"mask-text-reveal","title":"Mask Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/mask-text-reveal"}]},{"slug":"slide-text-reveal","title":"Slide Text Reveal","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"pro","summary":"A restrained slide-in text animation for SaaS headlines, agency section intros, launch claims, and proof statements.","description":"Slide Text Reveal for React moves text into place for clean product sections where emphasis should stay readable. Reduced-motion and touch fallbacks included.","tags":["GSAP"],"dependencies":["gsap"],"install":"npx hyperiux add slide-text-reveal","usage":"import SlideTextReveal from '@/components/effects/slide-text-reveal'\n\nconst page = () => {\n return (\n <>\n \n

\n Slide From Right\n

\n \n \n )\n}","props":[{"name":"animateOnScroll","type":"boolean","default":true,"description":"Runs reveal on scroll."},{"name":"delay","type":"number","default":0,"description":"Animation delay in seconds."},{"name":"duration","type":"number","default":0.5,"description":"Character reveal duration in seconds."},{"name":"horizontalOffset","type":"number","default":20,"description":"Starting horizontal offset in pixels."},{"name":"stagger","type":"number","default":0.03,"description":"Delay between revealed characters."},{"name":"variant","type":"string","default":"right","description":"Slide direction."}],"overview":["Slide Text Reveal helps important words arrive with intent: text moves into place with restraint.","Reach for it on headlines, launch claims, section openers, and one-line proof. Keep it away from body copy, error messages, legal text, and instructions, where reading has to be effortless.","In production, the risk is that the words get lost in the motion. The resolved phrase has to be real DOM text, the animation must not spell itself out to a screen reader, and a reduced-motion visitor should land on the final, readable state at once."],"exampleUseCase":["A branding agency can use Slide Text Reveal on its case study pages, for the short line that opens each project and the headers between chapters. The characters slide in from the side and fade in as the section enters view, giving each chapter a quiet sense of momentum.","The outcome is pace. Visitors feel the story move forward, and once the motion ends the text reads instantly, alongside project credits and body copy that stay still."],"bestFor":["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."],"notFor":["Not for body text, labels, errors, legal copy, or anything a user must read right away."],"performance":["Limit motion to the phrase that earns it, hold its layout space ahead of time, and keep heavy filters off large blocks of text."],"accessibility":["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."],"commonMistakes":["Using Slide Text Reveal on long body copy.","Removing the readable text from the DOM.","Letting split text cause layout shift."],"faq":[{"question":"When should I use Slide Text Reveal?","answer":"Use it when a heading needs text moving into place with restraint."},{"question":"How do I keep Slide Text Reveal accessible?","answer":"Ship the final phrase in the DOM and surface it a single time, hiding duplicated animated fragments from assistive technology where needed."},{"question":"Does Slide Text Reveal affect SEO?","answer":"Not when the final text ships as real HTML rather than living inside canvas or client-only animation."},{"question":"How do I avoid layout shift with Slide Text Reveal?","answer":"Pre-reserve the final text's space so line breaks stay put across breakpoints."},{"question":"What should reduced motion do for Slide Text Reveal?","answer":"Render the settled, legible text at once, with no scrambling, staggering, or looping."}],"access":"Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/slide-text-reveal","demoUrl":"https://vault.hyperiux.com/demo/slide-text-reveal","related":[{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"},{"slug":"circle-text-reveal","title":"Circle Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/circle-text-reveal"},{"slug":"glitchy-text","title":"Glitchy Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/glitchy-text"},{"slug":"mask-text-reveal","title":"Mask Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/mask-text-reveal"}]},{"slug":"spotlight-text","title":"Spotlight Text","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"pro","summary":"A moving-highlight text effect that guides attention across selected words, metrics, and short product claims.","description":"Spotlight Text for React lights selected words for short claims, product proof, and landing-page emphasis. Built to stay readable with motion off.","tags":["Vanilla JS"],"dependencies":[],"install":"npx hyperiux add spotlight-text","usage":"import SpotlightText from \"@/components/effects/spotlight-text\";\n\nconst page = () => {\n return (\n <>\n
\n \n
\n \n );\n};\n\nexport default page;","props":[{"name":"baseTextColor","type":"string","default":"#525252","description":"Dim base text color."},{"name":"spotlightColor","type":"string","default":"#ffffff","description":"Text color inside the spotlight."},{"name":"lerp","type":"number","default":0.08,"description":"Pointer-follow smoothing amount; higher values track faster."},{"name":"spotlightSize","type":"number","default":220,"description":"Spotlight radius in pixels."},{"name":"smoothness","type":"number","default":0.12,"description":"Spotlight opacity smoothing amount."},{"name":"size","type":"string","default":"text-3xl md:text-5xl","description":"Tailwind font-size classes for the text."}],"fixedText":true,"overview":["Spotlight Text helps important words arrive with intent: a highlight moves across the words.","Best on short, high-emphasis text: headlines, launch lines, section openers, proof points. Avoid it on body copy, errors, legal text, or instructions, where legibility cannot be negotiable.","The thing to watch is the text disappearing into the effect. Ship the final phrase as genuine HTML, keep per-character motion out of the accessibility tree, and serve the settled, legible text immediately when motion is reduced."],"exampleUseCase":["A sustainability report microsite can use Spotlight Text on a short impact statement near the top of the page. The sentence starts in a muted tone, and a soft highlight follows the visitor's cursor, brightening the words underneath as they read across the claim.","The outcome is focus. On touch devices and smaller screens the full sentence shows in the highlight color instead, so the statement never depends on hover to be read. Detailed figures and methodology sit below as ordinary text."],"bestFor":["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."],"notFor":["Avoid it on body copy, labels, error and legal text, or any wording that has to be read on sight."],"performance":["Move only the words that carry weight, pre-reserve their space to avoid shift, and skip costly filters on large text blocks."],"accessibility":["Assistive technology should hear the phrase once, not character by character; visually split fragments are hidden from the accessibility tree with aria-hidden."],"commonMistakes":["Using Spotlight Text on long body copy.","Removing the readable text from the DOM.","Letting split text cause layout shift."],"faq":[{"question":"When should I use Spotlight Text?","answer":"Use it when a headline needs a highlight moving across the words."},{"question":"How do I keep Spotlight Text accessible?","answer":"Keep the resolved phrase in the DOM, exposed once; mark any duplicated animated fragments hidden from assistive technology."},{"question":"Does Spotlight Text affect SEO?","answer":"Not as long as the resolved text is genuine HTML and never trapped in canvas or client-only animation."},{"question":"How do I avoid layout shift with Spotlight Text?","answer":"Hold the finished text's footprint so wrapping does not jump between breakpoints."},{"question":"What should reduced motion do for Spotlight Text?","answer":"Land directly on the finished, readable text: no character scramble, no stagger, no loop."}],"access":"Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/spotlight-text","demoUrl":"https://vault.hyperiux.com/demo/spotlight-text","related":[{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"},{"slug":"circle-text-reveal","title":"Circle Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/circle-text-reveal"},{"slug":"glitchy-text","title":"Glitchy Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/glitchy-text"},{"slug":"mask-text-reveal","title":"Mask Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/mask-text-reveal"}]},{"slug":"text-cloning","title":"Text Cloning","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"pro","summary":"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.","description":"Text Cloning for React stacks outline copies of a word on a canvas and shifts them with the pointer for experimental headings. Pair it with a real HTML heading.","tags":["Canvas"],"dependencies":[],"install":"npx hyperiux add text-cloning","usage":"import TextCloning from \"@/components/effects/text-cloning\";\n\nconst page = () => {\n return (\n <>\n \n \n );\n};\n\nexport default page;","props":[{"name":"cloneCount","type":"number","default":9,"description":"Number of text clone layers rendered."},{"name":"offset","type":"number","default":220,"description":"Maximum pointer parallax distance between clone layers."},{"name":"textColor","type":"string","default":"#f5f5f5","description":"Clone and center text color."},{"name":"textSize","type":"number","default":1,"description":"Text size multiplier."}],"fixedText":true,"overview":["Text Cloning gives important words pointer-driven depth: duplicated outline text shifts as the cursor or finger moves.","Use it for wordmarks, brand names, and one or two word display moments in a full-screen hero. Do not use it on long body copy, error messages, legal text, or instructions where legibility is non-negotiable.","The main risk is losing the text to the animation. The phrase is drawn on a canvas, not as DOM text, so add it once as real HTML or an aria-label, and know that reduced-motion users still see up to three layers that follow the pointer without easing."],"exampleUseCase":["A record label can use Text Cloning for an artist's name on a release page. Layered copies of the name stack back into depth behind the main word and shift as the visitor moves the pointer or touches the screen, turning a simple wordmark into a moving piece of artwork.","The outcome is energy. The canvas is decorative, so pair it with a real HTML heading carrying the same name, and keep track listings, tour dates, and ticket links in normal text."],"bestFor":["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."],"notFor":["Not for body copy, labels, error messages, legal copy, or any text users need to read immediately."],"performance":["Animate only the phrase that matters, reserve layout space, and avoid expensive filters over large text blocks."],"accessibility":["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."],"commonMistakes":["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."],"faq":[{"question":"When should I use Text Cloning?","answer":"Use it when a display heading needs duplicated text creating motion depth."},{"question":"How do I keep Text Cloning accessible?","answer":"The phrase is drawn on a canvas, so add it once as real HTML text or as an aria-label on the canvas. The clones are pixels and are never announced."},{"question":"Does Text Cloning affect SEO?","answer":"Yes, the text is drawn inside a canvas, so search engines do not see it. Render the same phrase as real HTML, such as a visually hidden h1."},{"question":"How do I avoid layout shift with Text Cloning?","answer":"The canvas is fixed to the full viewport, so it does not shift layout. The text sits on one line and scales to fit the screen width."},{"question":"What should reduced motion do for Text Cloning?","answer":"Under prefers-reduced-motion it drops to three layers and follows the pointer without easing, so nothing drifts. The layers still shift when the pointer moves."}],"access":"Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/text-cloning","demoUrl":"https://vault.hyperiux.com/demo/text-cloning","related":[{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"},{"slug":"circle-text-reveal","title":"Circle Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/circle-text-reveal"},{"slug":"glitchy-text","title":"Glitchy Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/glitchy-text"},{"slug":"mask-text-reveal","title":"Mask Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/mask-text-reveal"}]},{"slug":"text-fill-animation","title":"Text Fill Animation","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"pro","summary":"A text fill animation that adds visual emphasis to short phrases, metrics, proof points, and high-impact statements.","description":"Text Fill for React fills short phrases with motion for metrics, proof points, and statements that need a visual charge. Keeps content crawlable and accessible.","tags":["GSAP"],"dependencies":["gsap"],"install":"npx hyperiux add text-fill-animation","usage":"import TextFillAnimation from \"@/components/effects/text-fill-animation\";\n\nconst page = () => {\n return (\n <>\n \n \n );\n};\n\nexport default page;","props":[{"name":"text","type":"string","default":"Design systems should feel effortless, not like you're fighting your own components every time you build.","description":"Text filled on scroll."},{"name":"textColor","type":"string","default":"#111111","description":"Final text color."},{"name":"primaryColor","type":"string","default":"#ff6b00","description":"Highlight color."},{"name":"dimColor","type":"string","default":"#AAAAAA","description":"Initial dimmed text color."},{"name":"backgroundColor","type":"string","default":"#F0EFE9","description":"Section background color."},{"name":"duration","type":"number","default":0.4,"description":"Character fill animation duration in seconds."},{"name":"stagger","type":"number","default":0.05,"description":"Delay offset between each animated character."},{"name":"fillWidth","type":"number","default":1,"description":"Width of the color fill sweep band applied to each character."},{"name":"textSize","type":"string","default":"5vw","description":"Desktop font size as a CSS length."},{"name":"textWidth","type":"string","default":"80%","description":"Desktop text block width as a CSS length."},{"name":"tabletTextSize","type":"string","default":"6.5vw","description":"Font size as a CSS length at 768-1024px."},{"name":"tabletTextWidth","type":"string","default":"88%","description":"Text block width as a CSS length at 768-1024px."},{"name":"mobileTextSize","type":"string","default":"8vw","description":"Font size as a CSS length below 768px."},{"name":"mobileTextWidth","type":"string","default":"95%","description":"Text block width as a CSS length below 768px."}],"overview":["Text Fill helps important words arrive with intent: text fill.","Reach for it on headlines, launch claims, section openers, and one-line proof. Keep it away from body copy, error messages, legal text, and instructions, where reading has to be effortless.","The production risk is that the words get lost in the motion. The resolved phrase has to be real DOM text, the animation must not spell itself out to a screen reader, and a reduced-motion visitor should land on the final, readable state at once."],"exampleUseCase":["A product design agency can use Text Fill Animation for the one-sentence belief statement on its about page. The section holds in place while the visitor scrolls, and the characters fill in sequence from a dim tone, through a brief accent color, to the final text color.","The outcome is emphasis. The statement is read at the pace of the scroll, so the agency's position lands before the team bios and client list begin."],"bestFor":["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."],"notFor":["Not for body text, labels, errors, legal copy, or anything a user must read right away."],"performance":["Limit motion to the phrase that earns it, hold its layout space ahead of time, and keep heavy filters off large blocks of text."],"accessibility":["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."],"commonMistakes":["Using Text Fill on long body copy.","Removing the readable text from the DOM.","Letting split text cause layout shift."],"faq":[{"question":"When should I use Text Fill?","answer":"Use it when a headline needs its fill animating in to add emphasis."},{"question":"How do I keep Text Fill accessible?","answer":"Ship the final phrase in the DOM and surface it a single time, hiding duplicated animated fragments from assistive technology where needed."},{"question":"Does Text Fill affect SEO?","answer":"Not when the final text ships as real HTML rather than living inside canvas or client-only animation."},{"question":"How do I avoid layout shifts with Text Fill?","answer":"Pre-reserve the final text's space so line breaks stay put across breakpoints."},{"question":"What should reduced motion do for Text Fill?","answer":"Render the settled, legible text at once, with no scrambling, staggering, or looping."}],"access":"Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/text-fill-animation","demoUrl":"https://vault.hyperiux.com/demo/text-fill-animation","related":[{"slug":"split-canvas","title":"Split Canvas","docsUrl":"https://vault.hyperiux.com/effects/scroll-effects/split-canvas"},{"slug":"interactive-list-preview","title":"Interactive List Preview","docsUrl":"https://vault.hyperiux.com/effects/components/interactive-list-preview"},{"slug":"stack-loader","title":"Stack Loader","docsUrl":"https://vault.hyperiux.com/effects/loaders/stack-loader"}]},{"slug":"text-hover","title":"Text Hover Expand","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"pro","summary":"An interactive text effect that expands short words or labels on hover for editorial links, playful navigation, and desktop brand moments.","description":"Text Hover Expand for React stretches short labels on hover for editorial links and playful navigation moments. Degrades cleanly on low-power devices.","tags":["GSAP"],"dependencies":["gsap"],"install":"npx hyperiux add text-hover","usage":"import TextHover from '@/components/effects/text-hover'\n\nconst page = () => {\n return (\n <>\n \n \n )\n}","props":[{"name":"bgColor","type":"string","default":"#0a0a0a","description":"Section background color."},{"name":"textColor","type":"string","default":"#ffffff","description":"Inactive text and description color."},{"name":"hoverColor","type":"string","default":"#ffffff","description":"Active text and corner-frame color."},{"name":"duration","type":"number","default":0.35,"description":"Hover frame animation duration in seconds."}],"fixedText":true,"overview":["Text Hover Expand helps important words arrive with intent: hover expands the word without replacing it.","Best on short, high-emphasis text: headlines, launch lines, section openers, proof points. Avoid it on body copy, errors, legal text, or instructions, where legibility cannot be negotiable.","The risk in production is the text disappearing into the effect. Ship the final phrase as genuine HTML, keep per-character motion out of the accessibility tree, and serve the settled, legible text immediately when motion is reduced."],"exampleUseCase":["A creative studio can use Text Hover Expand for a services index on its homepage. Each discipline is listed as a short uppercase label, and hovering one swaps it for a larger version, opens a one-line description beneath it, and moves a corner-bracket frame onto the active item.","The outcome is exploration. The list stays compact until a visitor shows interest, and on touch screens each label opens with a tap, so nothing is locked behind hover."],"bestFor":["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."],"notFor":["Avoid it on body copy, labels, error and legal text, or any wording that has to be read on sight."],"performance":["Move only the words that carry weight, pre-reserve their space to avoid shift, and skip costly filters on large text blocks."],"accessibility":["Assistive technology should hear the phrase once, not character by character; visually split fragments are hidden from the accessibility tree with aria-hidden."],"commonMistakes":["Using Text Hover Expand on long body copy.","Removing the readable text from the DOM.","Letting split text cause layout shift."],"faq":[{"question":"When should I use Text Hover Expand?","answer":"Use it when an interactive heading needs hover to expand a word without replacing it."},{"question":"How do I keep Text Hover Expand accessible?","answer":"Keep the resolved phrase in the DOM, exposed once; mark any duplicated animated fragments hidden from assistive technology."},{"question":"Does Text Hover Expand affect SEO?","answer":"Not as long as the resolved text is genuine HTML and never trapped in canvas or client-only animation."},{"question":"How do I avoid layout shift with Text Hover Expand?","answer":"Hold the finished text's footprint so wrapping does not jump between breakpoints."},{"question":"What should reduced motion do for Text Hover Expand?","answer":"Land directly on the finished, readable text: no character scramble, no stagger, no loop."}],"access":"Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/text-hover","demoUrl":"https://vault.hyperiux.com/demo/text-hover","related":[{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"},{"slug":"circle-text-reveal","title":"Circle Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/circle-text-reveal"},{"slug":"glitchy-text","title":"Glitchy Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/glitchy-text"},{"slug":"mask-text-reveal","title":"Mask Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/mask-text-reveal"}]},{"slug":"text-stream","title":"Text Stream","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"pro","summary":"A signal-like text animation that makes short technical headlines feel like data, motion, or language flowing through a line.","description":"Text Stream for React gives copy a signal-like flow for technical, AI, and developer-tool hero lines. Source you own, with a static fallback.","tags":["GSAP"],"dependencies":["gsap"],"install":"npx hyperiux add text-stream","usage":"import TextStream from \"@/components/effects/text-stream\";\n\nconst page = () => {\n return (\n <>\n \n \n );\n};\n\nexport default page;","props":[{"name":"speed","type":"number","default":1,"description":"Streaming speed multiplier."},{"name":"verticalSpacing","type":"number","default":0.08,"description":"Vertical spacing between streamed lines."},{"name":"textColor","type":"string","default":"#ffffff","description":"Text color."},{"name":"backgroundColor","type":"string","default":"#000000","description":"Background color behind the stream."},{"name":"autoplay","type":"boolean","default":true,"description":"Keeps the stream drifting on its own when idle."},{"name":"runOnScroll","type":"boolean","default":true,"description":"Boosts and reverses the stream in response to scroll or wheel input."}],"fixedText":true,"overview":["Text Stream helps important words arrive with intent: text flows like signal through a line.","Use it for headlines, launch claims, short section openers, and one-line proof points. Do not use it on long body copy, error messages, legal text, or instructions where legibility is non-negotiable.","In production, the risk is losing the text to the animation. The final phrase must remain real DOM text, screen readers should not hear every animated character, and reduced-motion users should see the readable final state immediately."],"exampleUseCase":["A data infrastructure startup can use Text Stream in its homepage hero. The company name stays fixed on the left while short phrases about what the platform does stream vertically beside it, with one line highlighted at a time to complete the sentence.","The outcome is momentum. The stream runs on its own and speeds up when the visitor scrolls, so the hero feels like live signal rather than a static tagline. It works best with short phrases that each make sense on their own."],"bestFor":["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."],"notFor":["Not for body copy, labels, error messages, legal copy, or any text users need to read immediately."],"performance":["Animate only the phrase that matters, reserve layout space, and avoid expensive filters over large text blocks."],"accessibility":["Expose the complete phrase once for assistive technology. If characters are split visually, hide duplicated spans with aria-hidden when appropriate."],"commonMistakes":["Using Text Stream on long body copy.","Removing the readable text from the DOM.","Letting split text cause layout shift."],"faq":[{"question":"When should I use Text Stream?","answer":"Use it when a technical heading needs text flowing like signal through a line."},{"question":"How do I keep Text Stream accessible?","answer":"Keep the final phrase in the DOM and expose it once. Hide duplicated animated fragments from assistive technology when needed."},{"question":"Does Text Stream affect SEO?","answer":"Not if the final text is real HTML and not hidden inside canvas or client-only animation."},{"question":"How do I avoid layout shift with Text Stream?","answer":"Reserve final text space and keep line breaks stable across breakpoints."},{"question":"What should reduced motion do for Text Stream?","answer":"Show the final readable state immediately, with no scramble, stagger, or looping motion."}],"access":"Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/text-stream","demoUrl":"https://vault.hyperiux.com/demo/text-stream","related":[{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"},{"slug":"circle-text-reveal","title":"Circle Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/circle-text-reveal"},{"slug":"glitchy-text","title":"Glitchy Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/glitchy-text"},{"slug":"mask-text-reveal","title":"Mask Text Reveal","docsUrl":"https://vault.hyperiux.com/effects/text-animations/mask-text-reveal"}]},{"slug":"typing-text","title":"Typing Text","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"free","summary":"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.","description":"Typing Text for React types short lines into view with a cursor-led rhythm for developer tools, AI pages, security sections, and product intros.","tags":["CSS"],"dependencies":[],"install":"npx hyperiux add typing-text","usage":"import TypingText from \"@/components/effects/typing-text\";\n\nconst page = () => {\n return (\n <>\n \n\n )\n}","props":[{"name":"variant","type":"string","default":"sequential","description":"Typing sequence variant."},{"name":"textColor","type":"string","default":"#d8d8d8","description":"Typed text color."},{"name":"cursorColor","type":"string","default":"#f59e0b","description":"Cursor color."},{"name":"backgroundColor","type":"string","default":"#121212","description":"Background color."},{"name":"fontSize","type":"number","default":2.4,"description":"Text size in vw units."},{"name":"fontWeight","type":"number","default":500,"description":"Font weight."},{"name":"lineHeight","type":"number","default":1.55,"description":"Line height."},{"name":"textAlign","type":"string","default":"left","description":"Text alignment."},{"name":"maxWidth","type":"number","default":80,"description":"Maximum text block width in vw units."},{"name":"charactersPerSecond","type":"number","default":18,"description":"Typing speed."},{"name":"animationDuration","type":"number","default":1,"description":"Multiplier applied to each line typing duration."},{"name":"lineDelay","type":"number","default":0.5,"description":"Delay between line starts."},{"name":"holdDuration","type":"number","default":1.4,"description":"Hold time before loop reset."},{"name":"typingDirection","type":"string","default":"left-to-right","description":"Direction the text types from."},{"name":"blur","type":"number","default":0,"description":"Starting blur in pixels."},{"name":"rotate","type":"number","default":0,"description":"Starting X rotation in degrees."},{"name":"scale","type":"number","default":1,"description":"Starting scale before the line settles."},{"name":"perspective","type":"number","default":800,"description":"Perspective depth for rotated typing."},{"name":"cursorStyle","type":"string","default":"bar","description":"Cursor visual style."},{"name":"cursorWidth","type":"number","default":3,"description":"Cursor thickness in pixels."},{"name":"showCursor","type":"boolean","default":true,"description":"Shows the animated cursor."},{"name":"lines","type":"string[]","default":["Opening the vault handshake...","Verifying encrypted component keys.","Loading protected motion presets.","Vault access granted. Hyperiux assets are ready."],"description":"Lines to type, one string per line."}],"overview":["Typing Text reveals short lines of copy one character at a time.","The effect gives a message a technical cadence. It can make a product intro feel like a terminal output, a system check, a command sequence, or a status readout. It works best when the language already belongs to that world.","Use Typing Text when a product message benefits from procedural rhythm. It works well for developer tools, cybersecurity products, AI interfaces, onboarding moments, product intros, command-line references, and brand sections where the language already fits a system-like tone.","The page job is controlled anticipation. The visitor should feel the message arriving step by step without being forced to wait for basic comprehension. The typing effect can create tension, but the final copy still has to land quickly and remain readable."],"exampleUseCase":["A developer-tool landing page can use Typing Text in a hero section to introduce an install sequence, product capability, or system-status metaphor. The typed lines create a small sense of technical progress before the CTA appears.","The outcome is signal. The page feels more native to a developer audience because the copy behaves like a system interaction rather than a marketing headline dressed as one."],"bestFor":["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."],"notFor":["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."],"performance":["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."],"accessibility":["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."],"commonMistakes":["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."],"faq":[{"question":"What is Typing Text?","answer":"Typing Text is a React text animation that reveals short lines of copy character by character with a cursor-led typewriter or terminal rhythm."},{"question":"When should I use Typing Text?","answer":"Use it when the copy benefits from a system-like cadence: developer tools, AI products, cybersecurity pages, command references, onboarding sequences, or technical brand moments."},{"question":"Should Typing Text loop?","answer":"Usually no. Let the message type once, resolve, and stay readable. Looping can work in a demo, but on a production page it often becomes distracting."},{"question":"How do I keep Typing Text accessible?","answer":"Expose the final phrase or line group once to assistive technology. Avoid making screen readers announce every character, cursor blink, or intermediate typing state."},{"question":"Does Typing Text affect SEO?","answer":"Not if the final text renders as real HTML. Avoid trapping the only meaningful copy inside client-only animation state."},{"question":"What should reduced motion do for Typing Text?","answer":"Show the final text immediately or use a short fade. Remove character-by-character typing, cursor blinking, long delays, and repeated loops."},{"question":"Can Hyperiux adapt Typing Text for a real brand system?","answer":"Yes. A custom version should define line structure, typing rhythm, cursor style, timing rules, technical language boundaries, accessibility handling, reduced-motion fallback, source handoff, and implementation notes."}],"access":"Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/typing-text","demoUrl":"https://vault.hyperiux.com/demo/typing-text","related":[{"slug":"scramble-text","title":"Scramble Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/scramble-text"},{"slug":"drop-text","title":"Drop Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/drop-text"},{"slug":"pixel-text-fill","title":"Pixel Text Fill","docsUrl":"https://vault.hyperiux.com/effects/text-animations/pixel-text-fill"},{"slug":"text-stream","title":"Text Stream","docsUrl":"https://vault.hyperiux.com/effects/text-animations/text-stream"},{"slug":"glitchy-text","title":"Glitchy Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/glitchy-text"}]},{"slug":"variable-text-proximity","title":"Variable Text Proximity","category":{"id":"text","slug":"text-animations","name":"Text Animations"},"tier":"free","summary":"A cursor-reactive text animation for hero copy, editorial statements, portfolio intros, and technical landing pages where typography should feel responsive without losing readability.","description":"Variable Text Proximity for React makes letters respond to cursor distance with variable-font weight for interactive hero copy and editorial text.","tags":["Motion"],"dependencies":["motion"],"install":"npx hyperiux add variable-text-proximity","usage":"import VariableTextProximity from \"@/components/effects/variable-text-proximity\";\n\nconst page = () => {\n return (\n <>\n \n \n )\n}\n\n\nexport default page","props":[{"name":"radius","type":"number","default":100,"description":"Pointer influence radius."},{"name":"falloff","type":"string","default":"linear","description":"How quickly the font variation fades with distance."},{"name":"baseWeight","type":"number","default":300,"description":"Font weight away from the pointer."},{"name":"hoverWeight","type":"number","default":800,"description":"Font weight nearest the pointer."},{"name":"backgroundColor","type":"string","default":"#080808","description":"Demo background color."},{"name":"textColor","type":"string","default":"#ffffff","description":"Text color."},{"name":"fontSize","type":"number","default":55,"description":"Paragraph font size in pixels."},{"name":"lineHeight","type":"number","default":1.18,"description":"Paragraph line height."},{"name":"width","type":"number","default":80,"description":"Paragraph width as a percentage of its container."},{"name":"italic","type":"boolean","default":false,"description":"Slant nearby letters toward italic on pointer proximity."}],"fixedText":true,"overview":["Variable Text Proximity turns a paragraph into a responsive typographic surface.","Each character reacts to its distance from the pointer. Letters closest to the cursor gain visual weight first, nearby glyphs respond with softer intensity, and the full line settles back when the pointer moves away. The effect makes the text feel alive without changing the words, breaking the sentence, or turning the paragraph into a decorative canvas.","Use Variable Text Proximity when the page needs a subtle interaction layer around important copy. It works for short hero statements, creative portfolio intros, technical brand lines, studio manifestos, experimental editorial blocks, and product pages where the typography should reward exploration.","The page job is tactile reading. The visitor should still read the message normally, but the text should feel like it knows where attention is moving. The interaction is not there to hide the copy. It is there to make the copy feel closer."],"exampleUseCase":["A creative studio homepage can use Variable Text Proximity on a short manifesto line. As the visitor moves across the copy, the nearest words gain weight and settle back, making the statement feel physically responsive.","The outcome is attention with touch. The visitor experiences craft at the typography level without losing the sentence, the CTA, or the page structure.","A developer-tool or AI product page can use the same effect for a short technical claim, especially when the brand wants the interface to feel precise, reactive, and engineered rather than simply animated."],"bestFor":["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."],"notFor":["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."],"performance":["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."],"accessibility":["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."],"commonMistakes":["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."],"faq":[{"question":"What is Variable Text Proximity?","answer":"Variable Text Proximity is a React text animation where letters respond to cursor distance, often by changing variable-font weight, width, grade, or optical size."},{"question":"When should I use Variable Text Proximity?","answer":"Use it for short hero copy, editorial statements, portfolio intros, technical brand lines, and interactive typography moments where the text should react to attention."},{"question":"Does Variable Text Proximity require a variable font?","answer":"It works best with a variable font because the weight or width can interpolate smoothly. Without one, the effect may need a simpler font-weight, scale, opacity, or class-based fallback."},{"question":"Is Variable Text Proximity good for paragraphs?","answer":"Only short display paragraphs. It is not meant for long reading, documentation, policy copy, or dense product explanations."},{"question":"How do I keep Variable Text Proximity accessible?","answer":"Keep the complete phrase available as readable text and expose it once to assistive technology. If characters are individually wrapped for animation, hide decorative duplicates or provide a clean accessible label."},{"question":"How should it behave on mobile?","answer":"Disable cursor proximity, show a stable text state, or use a simplified tap-safe version. Do not force desktop pointer behavior onto touch screens."},{"question":"What should reduced motion do?","answer":"Remove pointer-reactive weight shifting and show the normal readable text. A static variable-font setting is fine; continuous proximity motion should be disabled."},{"question":"Can Hyperiux adapt Variable Text Proximity for a real brand system?","answer":"Yes. A custom version should define font selection, variable axes, proximity radius, weight range, smoothing, layout constraints, accessibility handling, mobile fallback, reduced-motion behavior, source handoff, and implementation notes."}],"access":"Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/text-animations/variable-text-proximity","demoUrl":"https://vault.hyperiux.com/demo/variable-text-proximity","related":[{"slug":"blur-text","title":"Blur Text","docsUrl":"https://vault.hyperiux.com/effects/text-animations/blur-text"},{"slug":"text-convergence","title":"Text Convergence","docsUrl":"https://vault.hyperiux.com/effects/scroll-effects/text-convergence"},{"slug":"text-stream","title":"Text Stream","docsUrl":"https://vault.hyperiux.com/effects/text-animations/text-stream"}]},{"slug":"dither-canvas","title":"Dither Canvas","category":{"id":"backgrounds","slug":"backgrounds","name":"Animated Backgrounds"},"tier":"pro","summary":"A grainy canvas background that adds computational texture behind hero copy, product sections, and technical brand moments.","description":"Dither Canvas for React adds grainy computational texture behind short hero copy for technical, editorial, and AI brand pages. Includes a clean mobile fallback.","tags":["Canvas shader"],"dependencies":[],"install":"npx hyperiux add dither-canvas","usage":"import DitherCanvas from \"@/components/effects/dither-canvas\";\n\nexport default function Page() {\n return (\n
\n \n
\n );\n}","props":[{"name":"videoSrc","type":"string","default":"https://pub-8abee449136941f5b0a1cd2c014534e9.r2.dev/binary-effect-video.mp4","description":"Video source URL used by the effect."},{"name":"charColumns","type":"number","default":145,"description":"Controls the density of generated character columns."},{"name":"colorizeFromVideo","type":"boolean","default":false,"description":"Uses video color data instead of fixed monochrome characters."},{"name":"videoZoom","type":"number","default":1,"description":"Zoom level applied to the video source."},{"name":"charZoom","type":"number","default":1,"description":"Scale factor for the rendered character grid."},{"name":"spellBrightChars","type":"boolean","default":false,"description":"Uses bright sampled areas to spell the configured character phrase."},{"name":"colorBoost","type":"number","default":1.4,"description":"Boosts sampled color intensity."},{"name":"disableMobileCursor","type":"boolean","default":true,"description":"Disables cursor interaction on mobile layouts."},{"name":"cursorHint","type":"string","default":"Move your cursor to see the binary fluid distortion effect.","description":"Instructional cursor hint text."},{"name":"showMobileMessage","type":"boolean","default":true,"description":"Shows or hides the mobile message overlay."},{"name":"className","type":"string","default":"","description":"Additional class names for the root canvas element."}],"overview":["Dither Canvas creates a supporting surface: a grainy digital texture gives the hero signal.","Use it behind hero copy, product sections, and technical brand moments where the background should make the page feel engineered without asking the browser to run a cinematic universe.","The main risk is readability. Headlines, body copy, fields, and CTAs must stay clear above the layer. The effect should be easy to freeze, lower in density, or replace with a static texture on mobile and reduced-motion contexts."],"exampleUseCase":["A robotics company can use Dither Canvas behind the hero of a product announcement. A short clip of the machine in motion is rendered as a dense field of characters, and moving the cursor distorts the field like fluid while the headline sits in clear HTML on top.","The outcome is texture with signal. The page feels computational before the visitor reads a word. In production, preserve readable HTML above the surface, cap animation cost, pause offscreen work, and provide a static fallback."],"bestFor":["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."],"notFor":["Not for low-contrast text sections, long reading pages, or pages already carrying heavy video/WebGL cost."],"performance":["Keep density low enough to protect text, pause animated canvas work offscreen, and provide a static CSS/image fallback."],"accessibility":["Decorative backgrounds should be hidden from assistive technology. On mobile, reduce density and keep foreground contrast high."],"commonMistakes":["Letting Dither Canvas compete with foreground text.","Animating canvas work offscreen.","Choosing canvas/WebGL when CSS would do the job."],"faq":[{"question":"When should I use Dither Canvas?","answer":"Use it when a grainy digital texture gives the hero signal supports the foreground message without harming readability."},{"question":"Can Dither Canvas ship without WebGL?","answer":"Yes if the visual can be handled with CSS or canvas. Do not reach for WebGL unless the hero needs shader-led depth."},{"question":"How do I protect text contrast with Dither Canvas?","answer":"Use masks, fades, lower opacity, and density controls around headings, forms, and CTAs."},{"question":"Should Dither Canvas pause offscreen?","answer":"Animated canvas variants should pause offscreen and when the tab is hidden."},{"question":"What is the mobile fallback for Dither Canvas?","answer":"Reduce density, disable pointer reaction, or switch to a static texture."}],"access":"Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/backgrounds/dither-canvas","demoUrl":"https://vault.hyperiux.com/demo/dither-canvas","related":[{"slug":"coffee-bean-cursor","title":"Coffee Bean Cursor","docsUrl":"https://vault.hyperiux.com/effects/cursor-effects/coffee-bean-cursor"},{"slug":"infinite-perspective-slider","title":"Infinite Perspective Slider","docsUrl":"https://vault.hyperiux.com/effects/scroll-effects/infinite-perspective-slider"},{"slug":"gooey-counter","title":"Gooey Counter","docsUrl":"https://vault.hyperiux.com/effects/components/gooey-counter"}]},{"slug":"dot-transition","title":"Dot Transition","category":{"id":"backgrounds","slug":"backgrounds","name":"Animated Backgrounds"},"tier":"free","summary":"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.","description":"Dot Transition for React forms letters from a field of animated dots for logo reveals, technical intros, and digital brand moments.","tags":["Canvas"],"dependencies":[],"install":"npx hyperiux add dot-transition","usage":"import DotTransition from '@/components/effects/dot-transition'\n\nconst page = () => {\n return (\n
\n \n
\n )\n}\n\nexport default page","props":[{"name":"spacing","type":"number","default":26,"description":"Distance between grid cells, in px."},{"name":"dotSize","type":"number","default":2.4,"description":"Resting dot size, in px."},{"name":"maxDotSize","type":"number","default":10,"description":"Fully \"on\" dot size, in px."},{"name":"growDuration","type":"number","default":1.8,"description":"Seconds for a shape to grow in from the resting grid."},{"name":"holdDuration","type":"number","default":0.05,"description":"Seconds a fully formed shape holds before shrinking away."},{"name":"shrinkDuration","type":"number","default":1.8,"description":"Seconds for a shape to shrink back down to the resting grid."},{"name":"gapDuration","type":"number","default":0.2,"description":"Seconds of plain resting grid between shrink and the next grow."},{"name":"revealAnchor","type":"number","default":0.5,"description":"Where shapes grow from / collapse into, as a fraction of height (0 = top, 1 = bottom)."},{"name":"dotColor","type":"string","default":"#ffffff","description":"Hex color used for the dots."},{"name":"backgroundColor","type":"string","default":"#000000","description":"Background color behind the dot grid."}],"overview":["Dot Transition turns text into a grid-based reveal.","Dots grow, shrink, brighten, and settle to form letters or short symbols. The surrounding grid can remain visible as a quiet technical surface while selected dots become the active letterform. The result feels mechanical, computational, and precise without requiring a full canvas-heavy scene.","Use Dot Transition when a brand mark, initial, product name, or short word should appear through a structured digital system. It fits AI products, developer tools, cybersecurity pages, infrastructure brands, data products, technical portfolios, and launch screens where a dot grid already belongs to the visual language.","The page job is formation. The visitor should feel the letter being built from smaller units, then read the result immediately. The effect should create a moment of assembly, not a puzzle where the user waits for dots to finish discussing their career options."],"exampleUseCase":["A developer-tool landing page can use Dot Transition as a product mark reveal near the hero or loading-adjacent intro. The letters form from a grid, hold briefly, then settle or hand off to the main headline.","The outcome is system identity. The brand feels technical because the typography behaves like it was generated from structure, not because someone added a random glow to a heading.","A cybersecurity page can use the same effect for access states, initials, short command labels, or section transitions where the grid language supports trust and precision."],"bestFor":["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."],"notFor":["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."],"performance":["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."],"accessibility":["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."],"commonMistakes":["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."],"faq":[{"question":"What is Dot Transition?","answer":"Dot Transition is a React text animation that forms letters, initials, or symbols from a grid of animated dots."},{"question":"When should I use Dot Transition?","answer":"Use it for logo reveals, technical intros, short labels, brand initials, product marks, and digital sections where grid-based typography fits the visual system."},{"question":"Is Dot Transition good for full sentences?","answer":"No. It works best for initials, short words, compact labels, and symbolic text. Full sentences become slow and hard to read."},{"question":"Does Dot Transition require canvas?","answer":"It depends on the implementation. A dot grid can be built with DOM, SVG, or Canvas. Confirm the shipped component before assuming the rendering method."},{"question":"How do I keep Dot Transition accessible?","answer":"Expose the meaningful letter or word as real text or an accessible label. Decorative dots should not be announced individually."},{"question":"What should reduced motion do?","answer":"Reduced motion should show the final text or a static dot-letter state. Remove dot growth, shrink, repeated cycling, and long transition sequences."},{"question":"Can Dot Transition be used as a loader?","answer":"Only if it is tied to a real loading state. Do not use it to imply fake progress. For decorative intros, describe it as a reveal, not a loader."},{"question":"Can Hyperiux adapt Dot Transition for a real brand system?","answer":"Yes. A custom version should define grid density, dot size, character mapping, transition rhythm, contrast rules, mobile scaling, accessibility handling, reduced-motion fallback, source handoff, and implementation notes."}],"access":"Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/backgrounds/dot-transition","demoUrl":"https://vault.hyperiux.com/demo/dot-transition","related":[{"slug":"dither-canvas","title":"Dither Canvas","docsUrl":"https://vault.hyperiux.com/effects/backgrounds/dither-canvas"},{"slug":"donut-particles","title":"Donut Particles","docsUrl":"https://vault.hyperiux.com/effects/webgl-effects/donut-particles"}]},{"slug":"dotted-grid","title":"Dotted Grid Background","category":{"id":"backgrounds","slug":"backgrounds","name":"Animated Backgrounds"},"tier":"free","summary":"A lightweight dotted grid background that gives SaaS, AI, developer-tool, and technical landing pages a clean structural layer.","description":"Dotted Grid for React: a quiet technical grid behind readable SaaS, AI, and developer-tool hero copy, with no video or WebGL cost and a static fallback.","tags":["Canvas"],"dependencies":[],"install":"npx hyperiux add dotted-grid","usage":"import DottedGrid from '@/components/effects/dotted-grid';\n\nconst Page = () => {\n return (\n <>\n \n \n )\n}\n\nexport default Page;","props":[{"name":"spacing","type":"number","default":24,"description":"Controls the distance between dots."},{"name":"baseRadius","type":"number","default":7.2,"description":"Sets the base dot size."},{"name":"mouseRadius","type":"number","default":380,"description":"Sets the dark cursor influence radius."},{"name":"trailLength","type":"number","default":456,"description":"Limits how many cursor trail samples are kept."},{"name":"trailRadius","type":"number","default":230,"description":"Controls the width of the cursor trail influence."},{"name":"trailFadeMs","type":"number","default":1200,"description":"Sets how long trail marks remain visible."},{"name":"backgroundColor","type":"color","default":"#000000","description":"Colors the canvas background."},{"name":"showDesktopHint","type":"boolean","default":true,"description":"Shows or hides the desktop hint."},{"name":"desktopHint","type":"string","default":"Click anywhere to change the pattern.","description":"Desktop hint text."},{"name":"mobileHint","type":"string","default":"Works best on desktop","description":"Mobile hint text shown above the touch instruction."},{"name":"className","type":"string","default":"","description":"Additional class names for the root section."}],"overview":["Dotted Grid gives SaaS, AI, and developer-tool heroes a quiet technical structure behind readable foreground copy.","Use it when the page needs an engineered surface without video, WebGL, or heavy animation. The grid should support the message, not compete with it.","The production risk is readability. Headlines, body copy, fields, and CTAs must stay clear above the layer. The effect should be easy to freeze, lower in density, or replace with a static texture on mobile and reduced-motion contexts."],"exampleUseCase":["An API platform can use Dotted Grid Background behind its homepage hero. The dots form geometric shapes that change on their own or when the visitor clicks, and the cursor leaves a soft glowing trail that fades behind it.","The outcome is structure. The hero gets a technical surface without video or WebGL, and the headline and signup field stay clearly readable above it. In production, preserve readable HTML above the surface, cap animation cost, pause offscreen work, and provide a static fallback."],"bestFor":["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."],"notFor":["Not for low-contrast text sections, long reading pages, or pages already carrying heavy video/WebGL cost."],"performance":["Keep density low enough to protect text, pause animated canvas work offscreen, and provide a static CSS/image fallback."],"accessibility":["Decorative backgrounds should be hidden from assistive technology. On mobile, reduce density and keep foreground contrast high."],"commonMistakes":["Letting Dotted Grid compete with foreground text.","Animating canvas work offscreen.","Choosing canvas/WebGL when CSS would do the job."],"faq":[{"question":"When should I use Dotted Grid?","answer":"Use it when Dotted Grid supports the foreground message without harming readability."},{"question":"Can Dotted Grid ship without WebGL?","answer":"Yes if the visual can be handled with CSS or canvas. Do not reach for WebGL unless the hero needs shader-led depth."},{"question":"How do I protect text contrast with Dotted Grid?","answer":"Use masks, fades, lower opacity, and density controls around headings, forms, and CTAs."},{"question":"Should Dotted Grid pause offscreen?","answer":"Animated canvas variants should pause offscreen and when the tab is hidden."},{"question":"What is the mobile fallback for Dotted Grid?","answer":"Reduce density, disable pointer reaction, or switch to a static texture."},{"question":"Can Hyperiux adapt Dotted Grid for a real brand system?","answer":"Yes. A custom version should define motion rules, visual treatment, performance budget, fallback behavior, source handoff, and implementation notes for the specific page or launch context."}],"access":"Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/backgrounds/dotted-grid","demoUrl":"https://vault.hyperiux.com/demo/dotted-grid","related":[{"slug":"dither-canvas","title":"Dither Canvas","docsUrl":"https://vault.hyperiux.com/effects/backgrounds/dither-canvas"},{"slug":"grid-lift","title":"Grid Lift","docsUrl":"https://vault.hyperiux.com/effects/backgrounds/grid-lift"},{"slug":"grid-tunnel","title":"Grid Tunnel","docsUrl":"https://vault.hyperiux.com/effects/webgl-effects/grid-tunnel"}]},{"slug":"grid-lift","title":"Grid Lift","category":{"id":"backgrounds","slug":"backgrounds","name":"Animated Backgrounds"},"tier":"pro","summary":"A structured WebGL grid effect that raises a technical surface into subtle depth for AI, developer-tool, and product hero sections.","description":"Grid Lift for React raises a structured WebGL surface for engineered heroes that need depth without a 3D showroom. Degrades cleanly on low-power devices.","tags":["Canvas"],"dependencies":[],"install":"npx hyperiux add grid-lift","usage":"import GridLift from '@/components/effects/grid-lift'\n\nconst page = () => {\n return (\n <>\n \n \n )\n}\n\nexport default page","props":[{"name":"maskScale","type":"number","default":1.08,"description":"Scale applied to the text/SVG mask."},{"name":"fontSize","type":"number","default":350,"description":"Base font size used to fit the text mask (Text mode only)."},{"name":"fontWeight","type":"number","default":200,"description":"Font weight used for the text mask (Text mode only)."},{"name":"interactionRange","type":"number","default":120,"description":"Distance from the mask shape at which cursor interaction starts registering."},{"name":"hoverRadius","type":"number","default":550,"description":"Radius of cursor influence over grid cells."},{"name":"hoverFalloff","type":"number","default":1.55,"description":"Falloff curve power applied across the hover radius."},{"name":"liftRotation","type":"number","default":-88,"description":"Direction, in degrees, that lifted cells are extruded toward."},{"name":"liftHeight","type":"number","default":58,"description":"Maximum extrusion distance for lifted cells."},{"name":"liftSmoothness","type":"number","default":0.08,"description":"Lerp smoothing factor applied to the lift animation."},{"name":"gridSpacing","type":"number","default":13,"description":"Spacing between grid cells, in pixels."},{"name":"strokeSize","type":"number","default":1.15,"description":"Line width for the grid strokes."},{"name":"baseOpacity","type":"number","default":1,"description":"Opacity of the resting (unlifted) grid."},{"name":"hoverOpacity","type":"number","default":0.6,"description":"Opacity of the lifted grid highlight."},{"name":"backgroundColor","type":"color","default":"#000000","description":"Canvas background color."},{"name":"gridColor","type":"color","default":"#272727","description":"Color of the resting grid lines."},{"name":"hoverColor","type":"color","default":"#ffffff","description":"Color of the lifted grid highlight."}],"overview":["Grid Lift raises a structured surface just enough to make the hero feel engineered without turning it into a 3D showroom.","Use it for technical brands, AI platforms, and developer-tool launches where structured motion should signal engineering taste. The page job is controlled lift: the grid adds depth while the copy stays in charge.","In production, the risk is jitter. Too many moving cells make the surface feel noisy, especially on lower-power devices."],"exampleUseCase":["An AI infrastructure startup can use Grid Lift in its launch hero, with the product wordmark or logo set as the mask. As the visitor's cursor moves near the shape, grid cells lift toward the pointer and settle back as it moves away, while the headline and CTA stay in HTML above the surface.","The outcome is precision. The brand feels engineered from the first frame without turning the hero into a 3D scene.","A design engineer's portfolio can use the same pattern behind a name or monogram on the opening screen."],"bestFor":["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."],"notFor":["Not for low-power-first pages, dense content, dashboards, checkout, or routes where performance is the main conversion lever."],"performance":["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."],"accessibility":["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."],"commonMistakes":["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."],"faq":[{"question":"What GPU budget should Grid Lift use on mobile and desktop?","answer":"Lifting a grid into depth scales with the number of cells animated, so cap DPR at 1.0 on mobile and 1.5 on desktop and keep the grid density reasonable. Reduce cell count or motion on weaker devices. Measure with your real grid size rather than a sparse demo."},{"question":"What poster fallback should replace Grid Lift when WebGL fails?","answer":"Show the grid in its flat, resting arrangement as a static image so the structure still reads without the lift. The surrounding HTML content is unaffected. The flat grid is a clean, honest substitute."},{"question":"How should Grid Lift pause when offscreen or in a hidden tab?","answer":"Pause the lift animation and render loop when the canvas leaves the viewport or the tab is hidden, then resume on return. Use demand rendering once the grid settles. Don't keep animating a grid no one is looking at."},{"question":"Which content should stay outside the Grid Lift canvas?","answer":"Any labels or links tied to grid items belong in the DOM, not in the rendered cells, so they stay readable and clickable. The lift is a visual flourish over real content. Keep interactive items as focusable elements."},{"question":"When should I choose a static image instead of Grid Lift?","answer":"Use a static grid when the depth adds nothing functional, when optimizing for mobile, or when the cells carry information users must read precisely. If the lift is pure decoration, the flat layout is leaner. Reserve it for hero or feature moments."}],"access":"Pro (proprietary Hyperiux Pro License): full source on a Pro or Pro+ plan (run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/backgrounds/grid-lift","demoUrl":"https://vault.hyperiux.com/demo/grid-lift","related":[{"slug":"grid-tunnel","title":"Grid Tunnel","docsUrl":"https://vault.hyperiux.com/effects/webgl-effects/grid-tunnel"},{"slug":"chess-grid-transition","title":"Chess Grid Transition","docsUrl":"https://vault.hyperiux.com/effects/page-transitions/chess-grid-transition"},{"slug":"curved-plane","title":"Curved Plane","docsUrl":"https://vault.hyperiux.com/effects/webgl-effects/curved-plane"},{"slug":"inertia-img","title":"Inertia Image","docsUrl":"https://vault.hyperiux.com/effects/cursor-effects/inertia-img"},{"slug":"infinite-carousel","title":"Infinite Carousel","docsUrl":"https://vault.hyperiux.com/effects/carousels/infinite-carousel"}]},{"slug":"spider-particles","title":"Spider Particles Background","category":{"id":"backgrounds","slug":"backgrounds","name":"Animated Backgrounds"},"tier":"free","summary":"A connected particle background where moving points form a light network field behind technical product content.","description":"Spider Particles for React creates a light particle web behind concise hero copy with density caps and offscreen pause. Built to stay readable with motion off.","tags":["Three.js"],"dependencies":["three"],"install":"npx hyperiux add spider-particles","usage":"import SpiderParticles from '@/components/effects/spider-particles'\n\nconst spiderParticlesProps = {\n particleCount:180,\n gridGap:0,\n particleSize:20.0,\n mouseConnectDist:160,\n spotlightRadius:300,\n particlesGlow:false,\n glowColor:0xffffff,\n particleColor:0xffffff,\n webColor:0xffffff,\n centerColor:0xffffff,\n}\n\nconst page = () => {\n return (\n
\n \n
\n )\n}\n\nexport default page","props":[{"name":"particleCount","type":"number","default":180,"description":"Controls how many particles are drawn."},{"name":"gridGap","type":"number","default":0,"description":"Switches to a spaced lattice when above zero."},{"name":"particleSize","type":"number","default":20,"description":"Makes each dot larger or smaller."},{"name":"mouseConnectDist","type":"number","default":160,"description":"Sets the web connection radius around the cursor."},{"name":"spotlightRadius","type":"number","default":300,"description":"Controls the cursor spotlight falloff."},{"name":"particleColor","type":"color","default":"#ffffff","description":"Colors the particles."},{"name":"webColor","type":"color","default":"#ffffff","description":"Colors the cursor connection lines."},{"name":"centerColor","type":"color","default":"#ffffff","description":"Colors the cursor center point."},{"name":"showWeb","type":"boolean","default":true,"description":"Turns the connection lines on or off."},{"name":"particlesGlow","type":"boolean","default":false,"description":"Enables glow rendering for particles and cursor points."},{"name":"glowColor","type":"color","default":"#ffffff","description":"Glow color used when particle glow is enabled."}],"overview":["Spider Particles creates a supporting surface: a light particle web adds controlled motion.","Use it behind hero copy, product sections, and technical brand moments where the background should make the page feel engineered without asking the browser to run a cinematic universe.","The risk in production is readability. Headlines, body copy, fields, and CTAs must stay clear above the layer. The effect should be easy to freeze, lower in density, or replace with a static texture on mobile and reduced-motion contexts."],"exampleUseCase":["A network monitoring SaaS can use Spider Particles Background behind its homepage hero. Points drift across the section, and lines connect them around the visitor's cursor, which suggests a live network without showing a literal diagram.","The outcome is quiet motion. The hero feels technical, and the product claim and signup CTA remain the clearest things on screen. In production, preserve readable HTML above the surface, cap animation cost, pause offscreen work, and provide a static fallback."],"bestFor":["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."],"notFor":["Not for low-contrast text sections, long reading pages, or pages already carrying heavy video/WebGL cost."],"performance":["Keep density low enough to protect text, pause animated canvas work offscreen, and provide a static CSS/image fallback."],"accessibility":["Decorative backgrounds should be hidden from assistive technology. On mobile, reduce density and keep foreground contrast high."],"commonMistakes":["Letting Spider Particles compete with foreground text.","Animating canvas work offscreen.","Choosing canvas/WebGL when CSS would do the job."],"faq":[{"question":"When should I use Spider Particles?","answer":"Use it when a light particle web adds controlled motion supports the foreground message without harming readability."},{"question":"Can Spider Particles ship without WebGL?","answer":"Yes if the visual can be handled with CSS or canvas. Do not reach for WebGL unless the hero needs shader-led depth."},{"question":"How do I protect text contrast with Spider Particles?","answer":"Use masks, fades, lower opacity, and density controls around headings, forms, and CTAs."},{"question":"Should Spider Particles pause offscreen?","answer":"Animated canvas variants should pause offscreen and when the tab is hidden."},{"question":"What is the mobile fallback for Spider Particles?","answer":"Reduce density, disable pointer reaction, or switch to a static texture."}],"access":"Free Core (open source, MPL 2.0): full source with a free account (CLI: run npx hyperiux login first).","docsUrl":"https://vault.hyperiux.com/effects/backgrounds/spider-particles","demoUrl":"https://vault.hyperiux.com/demo/spider-particles","related":[{"slug":"dither-canvas","title":"Dither Canvas","docsUrl":"https://vault.hyperiux.com/effects/backgrounds/dither-canvas"},{"slug":"grid-tunnel","title":"Grid Tunnel","docsUrl":"https://vault.hyperiux.com/effects/webgl-effects/grid-tunnel"},{"slug":"milky-way","title":"Milky Way","docsUrl":"https://vault.hyperiux.com/effects/webgl-effects/milky-way"},{"slug":"progressive-bloom-valley","title":"Progressive Bloom Valley","docsUrl":"https://vault.hyperiux.com/effects/webgl-effects/progressive-bloom-valley"}]},{"slug":"animated-toggle","title":"Animated Toggle","category":{"id":"buttons","slug":"buttons","name":"Animated Buttons"},"tier":"pro","summary":"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.","description":"Animated Toggle for React animates chevron, cross, and plus-to-minus icon buttons for expand, collapse, and dismiss controls. Ships with a reduced-motion fallback.","tags":["CSS"],"dependencies":[],"install":"npx hyperiux add animated-toggle","usage":"import AnimatedToggle from \"@/components/effects/animated-toggle\";\n\nexport default function AnimatedTogglePage() {\n return (\n <>\n
\n
\n \n
\n
\n \n );\n}","props":[{"name":"size","type":"number","default":96,"description":"Overall toggle box size in pixels."},{"name":"activeColor","type":"color","default":"#ff5f00","description":"Box color when a toggle is active."},{"name":"inactiveColor","type":"color","default":"#a1a1aa","description":"Box color when a toggle is inactive."},{"name":"duration","type":"number","default":0.32,"description":"Icon transition duration in seconds."}],"overview":["Animated Toggle gives a button or link a small, useful moment of feedback: a binary choice confirms state.","Use it where an icon control needs to feel responsive and intentional, not theatrical. A button should confirm action, state, or direction; it should not become a tiny stage play that delays the click.","The thing to watch is keeping the markup honest. Use genuine button and anchor elements, preserve focus, fire instantly, and make loading and disabled states obvious. The animation decorates the action; it is never the action."],"exampleUseCase":["A furniture retailer can use Animated Toggle on its product pages for the controls that open and close detail panels: a plus that turns into a minus for care instructions, a chevron that flips for the size guide, and a cross for dismissing a delivery note. Each box also switches between its inactive and active color.","The outcome is clarity of state. Shoppers can see at a glance which panels are open, and each control is a real button that responds on the first press."],"bestFor":["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."],"notFor":["Not for destructive actions, unclear states, or places where animation hides the label or delays activation."],"performance":["Keep feedback fast, avoid layout-triggering letter movement, and preserve instant activation."],"accessibility":["Use real buttons or anchors, visible focus-visible styles, and clear loading/disabled states. Touch targets should stay large enough on mobile."],"commonMistakes":["Building Animated Toggle with divs instead of real buttons or links.","Hiding the label during hover.","Forgetting loading and disabled states."],"faq":[{"question":"When should I use Animated Toggle?","answer":"Use it when an expand, collapse, or dismiss control needs a binary choice that confirms state without delaying the action."},{"question":"Should Animated Toggle use a real button or link?","answer":"Yes. Use `