An interactive typography experiment featuring algorithmically generated letter forms using bezier curves and parametric variations. Create living, breathing text that responds to your controls and mouse movements.
- Algorithmic Letterforms — Each character is procedurally generated from bezier curve primitives with variable-width stroke rendering
- Parametric Controls — Adjust weight (100-900), width (50-150%), contrast (0-100%), and curvature (0-100%) in real-time
- Animation Effects — Perlin noise displacement, breathing animation, mouse attraction, and motion trails
- Color Modes — Mono, gradient, rainbow, and neon color schemes
- Visual Effects — Multi-pass bloom/glow rendering with configurable intensity
- Preset Styles — Five built-in presets: Skeletal, Brutalist, Organic, Neon, and Calligraphic
- Keyboard Shortcuts — Quick access to all features via keyboard commands
- Next.js 16 — React framework with App Router
- React 19 — UI library with modern hooks
- Tailwind CSS v4 — Utility-first styling
- TypeScript — Type safety and IDE support
- Canvas2D API — High-performance 2D rendering
- Custom Type System — Complete glyph library (A-Z, 0-9, punctuation)
# Install dependencies
npm install
# or
bun install
# Run development server
npm run dev
# or
bun devOpen http://localhost:3000 to view the experiment.
| Key | Action |
|---|---|
| Space | Pause/Play animation |
| R | Randomize all parameters |
| G | Toggle glow effect |
| T | Toggle motion trails |
| D | Toggle debug overlay (FPS counter) |
| Esc | Clear text input |
| 1 | Load "Skeletal" preset |
| 2 | Load "Brutalist" preset |
| 3 | Load "Organic" preset |
| 4 | Load "Neon" preset |
| 5 | Load "Calligraphic" preset |
The system consists of three main layers:
- Glyph Library (
components/glyph-library.ts) — Parametric skeleton definitions for all characters - Renderer (
components/glyph-renderer.ts) — Variable-width stroke rendering using bezier curves - Canvas Component (
components/type-canvas.tsx) — Animation loop and visual effects
- Weight: Controls stroke thickness (100-900), mapped to variable-width multipliers
- Width: Horizontal scaling of letterforms (50-150%)
- Contrast: Modulates thin vs. thick stroke ratio (0-1)
- Curvature: Smoothness of bezier curves (0 = geometric, 1 = organic)
- Stress Angle: Calligraphic thick/thin variation based on stroke direction
- Perlin Noise: Smooth, organic displacement using 2D noise fields
- Breathing: Sinusoidal scale animation for pulsing effect
- Mouse Attraction: Glyphs move toward cursor within configurable radius
- Trails: Motion blur via alpha compositing for dynamic effects
The system includes several optimizations for smooth 60fps rendering:
- Adaptive quality reduction on low FPS (reduced glow passes, disabled trails)
- Mobile detection for reduced effect intensity
- Throttled noise calculation for long text strings
- Efficient bezier subdivision with configurable detail levels
- Character limit (30 max) to maintain performance
MIT