Letter Ricochet
Playful type with a physical kick. Hover a letter to send it spinning, hit it again wherever it lands, and watch it spring back into place.
Overview
About the Letter Ricochet
Playful type with a physical kick. Hover a letter to send it spinning, hit it again wherever it lands, and watch it spring back into place. It is delivered as editable TypeScript for React. Inline styles with native DOM animation. No Tailwind CSS required. Its focused API can be adapted to your own content and visual system.
Usage
When to use it
- Playful portfolio headlines and interactive brand statements.
- Creative landing pages with individually reactive letters.
What’s included
Files in the product ZIP
Letter Ricochet source
components/letter-ricochet.tsxEditable React and TypeScript component source.
Working example
examples/example.tsxA minimal import and render example that matches the packaged API.
Installation guide
README.mdManual ZIP installation, styling, compatibility, asset, and usage notes.
Usage
Import and render
Copy the packaged source to the documented path, then use the public API shown below.
import { LetterRicochet } from "@/components/letter-ricochet";<LetterRicochet text="Break the spell." velocity={260} returnDelay={1.5} />Props
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Break the spell." | Text split into individually moving letters. |
| color | string | "#fafafa" | Letter color. |
| background | string | "#0a0a0a" | Container background. |
| fontSize | number | 64 | Maximum responsive font size, 16–160 pixels. |
| velocity | number | 260 | Initial kick speed, 40–700 pixels per second. |
| rotation | number | 90 | Random spin magnitude, 0–360 degrees. |
| scale | number | 1 | Scale of scattered letters, 0.5–1.8. |
| returnDelay | number | 1.5 | Seconds after the last impact before returning, 0.2–8. |
| duration | number | 1.4 | Spring return timing, 0.4–4 seconds. |
| autoPlay | boolean | false | Automatically kick letters for a showcase; enabled only on active catalog cards by the demo. |
| paused | boolean | false | Display still text and disable input and animation. |
| height | number | string | 440 | Container height. |
| className / style | string / CSSProperties | — | Container styling. |
Hover individual letters to scatter them. Moving letters remain hittable at their current visual positions; re-enter or press on one to kick it again. The return timer restarts after every impact. Reduced motion keeps text still. An accessible text alternative is included.
Compatibility
Verified project setup
- ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
- This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
- Inline styles with native DOM animation. No Tailwind CSS required.
- Images
- No image files are included or required by the packaged component.
- Fonts
- No font files are included. The component uses system font fallbacks unless your app supplies a matching font.
Installation
Add it to your project
Download the Letter Ricochet ZIP, place the source file at src/components/letter-ricochet.tsx, and copy the example into your own page or feature folder.
Target path
src/components/letter-ricochet.tsxNo additional npm runtime packages are required beyond the React host; follow the styling requirements below.
Styling requirements
- No additional dependencies or font assets required.
- Pointer collisions follow each letter at its current transformed position. Touch scrolling is preserved.
- Reduced motion keeps the text still. Animation stops offscreen and in hidden tabs.