Lantern Type
A soft flashlight follows your cursor across dim typography, illuminating only the words beneath its beam while the rest stays in shadow.
Overview
About the Lantern Type
A soft flashlight follows your cursor across dim typography, illuminating only the words beneath its beam while the rest stays in shadow. It is delivered as editable TypeScript for React. Inline styles, CSS radial masks, and native pointer events. No Tailwind CSS required. Its focused API can be adapted to your own content and visual system.
Usage
When to use it
- Atmospheric editorial copy and interactive portfolio headlines.
- Hidden-message hero sections and focused reading experiences.
What’s included
Files in the product ZIP
Lantern Type source
components/lantern-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 { LanternType } from "@/components/lantern-type";<LanternType text="Follow the light. There is more to discover." radius={145} />Props
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "A closer look reveals a little more. Follow the light." | Text illuminated by the local flashlight. |
| color | string | "#ffffff" | Text and bright beam color. |
| tint | string | "#c4b5fd" | Subtle glow tint within the beam. |
| background | string | "#0a0a0a" | Container background. |
| fontSize | number | 56 | Maximum responsive font size, 16–160 pixels. |
| maxWidth | number | 21 | Text width in ch units, 8–60. |
| radius | number | 145 | Flashlight radius in local CSS pixels, 30–400. |
| softness | number | 0.65 | Beam edge softness, 0–1. |
| baseOpacity | number | 0.1 | Unlit text opacity, 0–1. Set zero to hide it completely. |
| follow | number | 12 | Pointer follow speed, 2–40. |
| idle | "off" | "drift" | "off" | Off leaves only dim text without a pointer; drift animates a showcase beam. |
| paused | boolean | false | Keep the initial beam state without animation or pointer input. |
| height | number | string | 440 | Container height. |
| className / style | string / CSSProperties | — | Container styling. |
A single accessible base text is paired with a decorative masked bright copy. The beam tracks container-local pointer coordinates, including scaled card previews. Leaving fades the beam away unless idle drift is enabled. Touch scrolling is preserved. Reduced motion updates the beam immediately.
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, CSS radial masks, and native pointer events. 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 Lantern Type ZIP, place the source file at src/components/lantern-type.tsx, and copy the example into your own page or feature folder.
Target path
src/components/lantern-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.
- Only the text inside the pointer beam is illuminated; surrounding text remains dim.
- Reduced motion follows the pointer immediately and disables idle drift. Offscreen and hidden tabs suspend animation.