Kinetic Type Field React Component

LIVE PREVIEWInteract with the component

Install dependencies

npm install @react-three/fiber three

CSS Modules

Usage

Matches your current playground settings.

import KineticTypeField from "./KineticTypeField";

export default function Example() {
  return (
    <KineticTypeField
      text={"DESIGN IS A SYSTEM, NOT A STYLE"}
      colors={[
        "#0b0b12",
        "#e2e8f0",
        "#22d3ee"
      ]}
      intensity={1}
      tilt={1}
      parallax={1}
      speed={0.6}
      letterSpacing={0.62}
      letterScale={1}
      fontFamily={"Space Grotesk, system-ui, sans-serif"}
      fontWeight={700}
      fontSize={170}
      minHeight={240}
    />
  );
}

Using Kinetic Type Field

Use a short phrase with enough space for individual letters to move. fontSize, letterSpacing, and letterScale determine the composition.

Keep the text readable in its resting position. Use minHeight to reserve the interactive area and a restrained speed for a calmer response.

Props

Name	Type	Required	Default	Description
text	string	No	""	Headline text rendered as kinetic letter planes.
className	string	No	undefined	Additional CSS class names, merged with base component styles.
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.
mouseRef	React.MutableRefObject<{ x: number; y: number }>	No	undefined	Optional pointer ref for external cursor tracking, values in the range [-1, 1].