Chromatic Text

Chromatic Text is an interactive typography component for Framer that transforms ordinary text into a vibrant visual experience using real-time WebGL effects.

Move your cursor across the text to create flowing spectral trails, chromatic color shifts, and dynamic lens distortions. Add atmospheric grain, scanlines, and animated pulse effects to create a distinctive visual style.

With customizable typography, color tones, interaction settings, and animation controls, Chromatic Text is perfect for creative portfolios, landing pages, experimental websites, and expressive hero sections.

Key features

• Interactive chromatic effects: Create colorful spectral trails with cursor movement.

• Fluid motion: Real-time GPU-powered fluid simulation.

• Lens distortion: Add dynamic pointer-following visual distortion.

• 12-sample chromatic effect: Produce vibrant color separation around text.

• Pulse animation: Trigger a ripple effect on mount or automatically.

• CRT texture: Add grain and scanline effects.

• Custom typography: Control font, size, weight, and letter spacing.

• Three visual tones: Dark, Light, and Custom.

• Performance optimization: GPU rendering sleeps when idle and can pause when offscreen.

• WebGL fallback: Displays styled text when WebGL 2 is unavailable.