Contour Type
Crisp typography that unfolds into mint contour layers around your cursor. Each letter lifts independently and settles back as you move away.
Overview
About the Contour Type
Crisp typography that unfolds into mint contour layers around your cursor. Each letter lifts independently and settles back as you move away. It is delivered as editable TypeScript for React. Inline styles and native DOM text. No Tailwind CSS required. Its focused API can be adapted to your own content and visual system.
Usage
When to use it
- Expressive portfolio headlines and creative hero sections.
- Interactive brand statements and editorial typography.
What’s included
Files in the product ZIP
Contour Type source
components/contour-type.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 { ContourType } from "@/components/contour-type";<ContourType text="Make your mark." accent="#5eead4" layers={7} />Props
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Make your mark." | Displayed text; words wrap naturally. |
| color | string | "#ffffff" | Front text color. |
| accent | string | "#5eead4" | Contour stroke or solid extrusion color. |
| backColor | string | "#0a0a0a" | Fill between contour strokes. Match background for hollow-looking layers. |
| background | string | "#0a0a0a" | Container background. |
| fontSize | number | 96 | Maximum font size in pixels; scales to container width. |
| fontWeight | number | 750 | Font weight supported by the system font. |
| layers | number | 7 | Contour layer count, clamped to 1–16. |
| depth | number | 32 | Maximum extrusion distance in pixels, 0–100. |
| radius | number | 150 | Pointer influence radius in viewport pixels, 30–500. |
| angle | number | 35 | Extrusion direction in degrees, -180–180. |
| response | number | 12 | Settling speed, 2–30. |
| extrusion | "outline" | "solid" | "outline" | Contour layers or filled extrusion. |
| uppercase | boolean | false | Transform displayed text to uppercase. |
| paused | boolean | false | Disable pointer updates and animation. |
| height | number | string | 420 | Container height. |
| className / style | string / CSSProperties | — | Container styling. |
Plain text at rest. Only nearby letters unfold; leaving the container collapses all layers. Decorative copies are hidden from assistive technology. Reduced motion updates instantly. No external fonts or source artwork are required.
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 and native DOM text. 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 Contour Type ZIP, place the source file at src/components/contour-type.tsx, and copy the example into your own page or feature folder.
Target path
src/components/contour-type.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.
- Each letter responds to local pointer proximity. Touch scrolling is preserved.
- Reduced motion applies a still extrusion without animation. Offscreen and hidden-page animation stops.