Vertical Spring Couplet: Free React + Tailwind Component

A spring couplet layout with vertically written upper and lower scrolls plus a top banner — gold on red, revealed stroke by stroke.

writing-mode: vertical-rl lays out the traditional spring couplet form — the upper scroll on the top right, the lower scroll on the bottom left — with a banner across the top and an optional diamond “Blessing” character. The background has a red velvet texture and the characters are embossed with a gold gradient; on reveal each character settles like a brush stroke landing (from enlarged and blurred down to sharp and in place), and hovering a scroll makes it flutter slightly like paper.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add vertical-couplet.en

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Upper coupletupper

Lower coupletlower

Horizontal scrollhorizontal

Show the 福 charactershowFu

Per-character stagger (s)stagger

0.1

Stroke-down duration (s)duration

0.5

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<VerticalCouplet/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/vertical-couplet.en.json

Or, once registries are configured in components.json, install it as @webberui/vertical-couplet.

Usage

import { VerticalCouplet } from "@/components/ui/vertical-couplet";

<VerticalCouplet
  upper="May Time Add Years to Your Life"
  lower="Springtime Brings Blessings to Your Home"
  horizontal="Peace and Safety in All Seasons"
  showFu
/>

By tradition the upper scroll is pasted on the right as you face the door and the lower scroll on the left, and the component lays them out that way — while the DOM order stays in the reading order "banner → upper scroll → lower scroll". The banner reads left to right by modern convention; if you want the traditional right-to-left reading, pass the reversed string.

Props

Prop	Type	Default	Description
`upper`	`string`	—	Upper scroll, written vertically top to bottom, visually on the right
`lower`	`string`	—	Lower scroll, visually on the left
`horizontal`	`string`	—	The top banner; omit it and no banner is shown
`showFu`	`boolean`	`false`	Whether to paste a diagonal diamond “Blessing” character between the two scrolls
`stagger`	`number`	`0.1`	Interval between characters as they land stroke by stroke (seconds)
`duration`	`number`	`0.5`	Duration of a single character's animation from suspended to settled (seconds)
`className`	`string`	—	Forwarded to the outer container

Accessibility

When the user has "reduce motion" enabled at the system level, the per-character landing and the hover flutter are skipped and the complete couplet is shown statically
The complete text of each scroll is provided sr-only for assistive technology, and the split per-character spans are all aria-hidden
The DOM order is the correct reading order (banner → upper scroll → lower scroll), so screen readers are unaffected by the right-to-left visual arrangement
The text is real DOM text rather than an image, so it can be selected, searched, and translated

Vertical Spring Couplet