127+ Primitives
Glyph Trail
TextInteractive monospace text matrix that scrambles characters into kinetic mathematical glyphs under cursor proximity, relaxing back with fluid color decay.
InteractiveText EffectFramer MotionA11y Ready
stem docs logic
ideas natural input
text corca math
formulas notation
functions variables
collaborative editing
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/glyph-trail.json"
Props
TypeScript props supported by <GlyphTrail />.
| Prop | Type | Default | Description |
|---|---|---|---|
| lines | string[] | DEFAULT_GLYPH_LINES | Monospace text lines centered and rendered in the interactive matrix. |
| highlight | string | "corca" | Specific keyword that remains locked in crisp white and never scrambles. |
| glyphs | string | string[] | DEFAULT_GLYPHS | Character set of mathematical symbols and glyphs used for scramble animations. |
| radius | number | 30 | Influence radius in pixels around pointer coordinates where scrambling occurs. |
| lifeMs | number | 1200 | Average duration in milliseconds a scrambled glyph persists before settling back. |
| className | string | undefined | Additional Tailwind CSS classes merged into the container element. |
Key Features
- Dynamic pointer proximity field that detects character distance squared (r²) for optimal 60fps performance.
- Dual-phase decay engine: characters first scramble into mathematical glyphs, transition to original letters in color, and gracefully settle back to neutral.
- Per-character randomized palette accents with subtle outline boxing, bold weights, and italic styling.
- Zero layout shift monospace rasterization with ResizeObserver and FontFaceSet measurement caching.
- Configurable highlight keywords that remain locked and protected from scrambling.
Keyboard & Accessibility
- Semantic role='img' and aria-label containing the full readable text lines for screen reader accessibility.
- Automatically honors prefers-reduced-motion by bypassing hover proximity scrambling.
- Maintains readable text contrast against dark backgrounds across all decay phases.