Component•Free

Cipher Flow

A pointer-driven ribbon of luminous character cells that shifts from violet to pink and gently dissolves into the background.

Shape the signal

Cell size14pxCell gap2pxCell radius2pxBrush width36pxTrail lifetime1.40sDrift speed1.00ModeHead colorTail colorGlyph colorBackgroundCharacter set

Overview

About the Cipher Flow

A pointer-driven ribbon of luminous character cells that shifts from violet to pink and gently dissolves into the background. It is delivered as editable TypeScript for React. No Tailwind CSS required. Canvas rendering and inline component styles. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

Creative portfolios and interactive technology landing pages.
Playful hero backgrounds with a customizable character trail.

What’s included

Files installed with the component

Cipher Flow source

components/cipher-flow.tsx

Editable React and TypeScript component source.

Working example

examples/example.tsx

A minimal import and render example that matches the packaged API.

Installation guide

README.md

Manual 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

import { CipherFlow } from "@/components/cipher-flow";

Minimum example

<CipherFlow height={480} cellSize={14} lifetime={1.4}>
  <h1>Write in motion.</h1>
</CipherFlow>

Props

Component API

Prop	Type	Default	Description
headColor / tailColor	string	"#6535ff" / "#f5a8ed"	CSS colors interpolated as cells age.
glyphColor	string	"#ffffff"	Character color.
backgroundColor	string	"#09090f"	Container background.
characters	string	"ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"	Custom glyph set, up to 256 characters. Empty values fall back to binary digits.
cellSize	number	14	Cell width in CSS pixels, clamped to 7–36.
gap	number	2	Cell spacing, clamped to 0–10 pixels.
radius	number	2	Corner radius, clamped to half the cell size.
brushSize	number	36	Brush radius in pixels, limited to 100 and at least one cell pitch.
lifetime	number	1.4	Cell lifetime in seconds, clamped to 0.2–4.
speed	number	1	Automatic path speed, clamped to 0–3.
mode	"auto" \| "pointer"	"auto"	Auto draws an idle ribbon; pointer mode only responds to the pointer.
paused	boolean	false	Freeze the animation and pointer drawing.
height	number \| string	480	Container height.
children	ReactNode	—	Content layered above the decorative canvas.
className / style	string / CSSProperties	—	Container styling.

Canvas is decorative and hidden from screen readers. Pointer movement does not block child interactions or native scrolling. Reduced motion shows a still ribbon, updated locally on pointer input.

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.
No Tailwind CSS required. Canvas rendering and inline component styles.

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 Cipher Flow ZIP, place the source file at src/components/cipher-flow.tsx, and copy the example into your own page or feature folder.

Target path

src/components/cipher-flow.tsx

No additional npm runtime packages are required beyond the React host; follow the styling requirements below.

Styling requirements

No additional npm dependencies or font assets are required.
Pointer events stay local to the container; touch scrolling and child interactions are preserved.
Reduced motion uses a still trail. Animation pauses offscreen and in hidden tabs.