Component•Premium

Hanging Script

A two-tier pavilion roof with columns of Chinese characters hanging from its eaves like silk. Sweep the cursor through the script to blow it aside; it settles back into its columns.

Under the eaves.

Brush the script aside. It settles back like silk.

Customize

HeadlineGlyph size1Sweep strength0.6Settle speed1Breeze1PaperInkRoof tilesEave beams

Sweep the pointer through the hanging script; the columns swing away and settle back under the eaves. The characters are the opening of the Thousand Character Classic, a public-domain text.

Overview

About the Hanging Script

A two-tier pavilion roof with columns of Chinese characters hanging from its eaves like silk. Sweep the cursor through the script to blow it aside; it settles back into its columns. It is delivered as editable TypeScript for React. Self-contained, instance-scoped CSS, an inline SVG roof and one 2D canvas. Tailwind CSS is not required. No animation package required. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

Travel, culture and heritage heroes with a tactile, editorial feel.
Calligraphy, tea and restaurant brands that want type to move like fabric.

What’s included

Files in the product ZIP

Hanging Script source

components/hanging-script.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 { HangingScript } from "@/components/hanging-script";

Minimum example

export default function Heritage() {
  return <HangingScript title="Old roads, new light." description="Sweep through the script." />;
}

Props

Component API

Prop	Type	Default	Description
title / description	ReactNode	"Under the eaves." / short hint	Copy at the lower left. Pass an empty value to hide either.
script	string	Thousand Character Classic	Characters that hang from the eaves, read top to bottom, right to left. Repeats to fill the columns.
paperColor	string	"#efe9dc"	Background paper.
inkColor	string	"#2a2420"	Character color.
tileColor / beamColor	string	"#e2a72e" / "#3a2620"	Glazed roof tiles and eave beams.
glyphScale	number	1	Character size relative to the roof, 0.6–1.6.
sweep	number	0.6	How hard a pass of the pointer swings the script aside, 0–2.
settle	number	1	How quickly the swinging columns calm down and return, 0.2–2.
breeze	number	1	Idle sway in the hanging columns, 0–2.
interactive	boolean	true	Respond to the pointer.
autoSweep	boolean	false	Move a virtual hand through the script on its own.
paused	boolean	false	Freeze the simulation.
height	number \| string	640	Section height.
ariaLabel	string	describes the scene	Accessible label for the illustration.
className / style	string / CSSProperties	—	Optional root class and styles.

Every character is a node on a hanging thread pinned under the lower eave. Threads hang under gravity, so a sweep of the pointer swings them left and right like pendulums; the hand drags glyphs toward its own speed (the lowest ones most), neighbouring threads push each other along so the curtain fans out into the open paper, and a faint pull returns each column to its place. While the script flies the last frame fades slowly instead of clearing, leaving brushed trails. Columns read right to left, as in a hanging scroll. Pixel ratio is capped at 2; vertical touch scrolling stays native.

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.
Self-contained, instance-scoped CSS, an inline SVG roof and one 2D canvas. Tailwind CSS is not required. No animation package 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 Hanging Script ZIP, place the source file at src/components/hanging-script.tsx, and copy the example into your own page or feature folder.

Target path

src/components/hanging-script.tsx

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

Styling requirements

The characters render with the visitor's installed Chinese serif font (Noto Serif SC, Songti SC, SimSun and similar). No font file is bundled.
The script simulation pauses offscreen and in hidden tabs. prefers-reduced-motion renders a single still frame.
The default script is the opening of the Thousand Character Classic, a sixth-century public-domain text. Pass your own through script.
No third-party code, media, or fonts are redistributed. React and React DOM are host dependencies under their respective MIT licenses.