Aurora Flares
Backgrounds
Kinetic Type Field
A kinetic text field with cursor-driven repulsion and floating motion.
Customize
ADVERT
Overview
Kinetic Type Field turns a headline into a responsive ribbon of letters that drift and repel around your cursor. The typography stays readable while the motion adds a premium, kinetic feel. Use it for bold hero statements, manifesto lines, or brand taglines.
Props
Use the props below to customise the kinetic type field in your own React application.
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| text | string | No | DESIGN IS A SYSTEM, NOT A STYLE | Headline text rendered as kinetic letter planes. |
| className | string | No | undefined | Optional class name for layout control. |
| mouseRef | React.MutableRefObject<{ x: number; y: number }> | No | undefined | Optional pointer ref for external cursor tracking, values in the range [-1, 1]. |
| colors | string[] | No | ["#0b0b12", "#e2e8f0", "#22d3ee"] | Array of up to three colors used for the background and letter gradient. |
| intensity | number | No | 1 | Overall brightness of the letter textures. |
| tilt | number | No | 1 | How much the letters rotate as they repel from the cursor. |
| parallax | number | No | 1 | Strength of the cursor repulsion effect. |
| speed | number | No | 0.6 | Speed multiplier for the drifting motion. |
| letterSpacing | number | No | 0.62 | Horizontal spacing between letters, measured in scene units. |
| letterScale | number | No | 1 | Scale multiplier applied to each letter plane. |
| fontFamily | string | No | Space Grotesk, system-ui, sans-serif | Font family used to draw the letter textures. |
| fontWeight | number | string | No | 700 | Font weight used in the canvas text rendering. |
| fontSize | number | No | 170 | Font size for the canvas-rendered letters. |
| minHeight | number | string | No | 240 | Minimum height for the component container. Accepts a number (pixels) or any valid CSS height string. |
Related React components
More components from the same category or sharing similar tags.
