component-library
IntroductionInstallationPrompt InputAgent ActivityMessageTodo ListMessage ScrollerImage Generation (new)Chat Alert (new)Chat Widget (new)Weather Sky (new)Aurora (new)Light Rays (new)Precipitation (new)Particles (new)Network Graph (new)ASCII Art (new)Progressive Blur (new)Vapor Text (new)Text Scramble (new)Scramble Link (new)Morph-in Text (new)Handwritten Quote (new)Hold Action Button (new)Metallic Link (new)Expanding Arrow Button (new)Motion Arrow Button (new)Theme Toggle (new)Color Selector (new)Floating Nav (new)Expandable Action Bar (new)Motion Search (new)Section Rail (new)Footer (new)Agent View (new)Cylinder Carousel (new)Infinite Masonry (new)Card (new)Pixel Reveal (new)Reveal Image (new)Inline Video (new)Project Showcase (new)Hover Accordion (new)Frame Rule (new)Consent Card (new)Following Avatar (new)
component-library
Search components/

Get Started

IntroductionInstallation

AI Agents8

Prompt InputAgent ActivityMessageTodo ListMessage ScrollerImage GenerationNewChat AlertNewChat WidgetNew

Backgrounds8

Weather SkyNewAuroraNewLight RaysNewPrecipitationNewParticlesNewNetwork GraphNewASCII ArtNewProgressive BlurNew

Text5

Vapor TextNewText ScrambleNewScramble LinkNewMorph-in TextNewHandwritten QuoteNew

Buttons & Controls6

Hold Action ButtonNewMetallic LinkNewExpanding Arrow ButtonNewMotion Arrow ButtonNewTheme ToggleNewColor SelectorNew

Navigation6

Floating NavNewExpandable Action BarNewMotion SearchNewSection RailNewFooterNewAgent ViewNew

Media & Cards9

Cylinder CarouselNewInfinite MasonryNewCardNewPixel RevealNewReveal ImageNewInline VideoNewProject ShowcaseNewHover AccordionNewFrame RuleNew

Feedback & Overlays2

Consent CardNewFollowing AvatarNew

“Design is not just what it looks like and feels like. Design is how it works”

“Design is not just what it looks like and feels like.
Design is how it works”

Steve Jobs
poulo

Menu

  • Home pageHome page
  • WorksWorks
  • About meAbout me
  • StackStack

Contact

  • EmailEmail
  • LinkedinLinkedin
  • GitHubGitHub

Designed and built by Poulo

poulo

TextScramble Link

Scramble Link

A link whose label scrambles into place each time it is pointed at or focused. It renders a plain anchor and takes any anchor attribute.

Loading preview…

Install

Steps for Next.js.

  1. 1

    Install the package

    One package carries every component and its effects, all original code.

    bun add @poulo2/ai-components
  2. 2

    Load the styles with Tailwind v4

    Add both lines to your global stylesheet so Tailwind generates the classes the components use. If your app already defines the shadcn/ui tokens, skip the theme import to keep your own palette.

    @import "@poulo2/ai-components/theme.css";
    @source "../node_modules/@poulo2/ai-components/dist";
  3. 3

    Or load the prebuilt stylesheet

    For apps without Tailwind. Import it once at the root; it includes Tailwind's base reset.

    import "@poulo2/ai-components/styles.css";

Props

NameTypeDefaultDescription
hrefstring—Where the link goes.
labelstring—The link text that scrambles.
externalbooleanfalseOpens in a new tab, for links that leave the site.
...anchorAnchorHTMLAttributes—Any other anchor attribute, className included.