Heading that assembles itself: every letter rises from under its own mask in a left-to-right wave.
"use client";
import * as React from "react";
import { LetterRiseHeading } from "@/components/ui/letter-rise-heading";
/* Демо: тот случай, ради которого приём и придумывался — крупный заголовок
на тёмном свечении, где волна букв читается целиком.
Шрифт берётся из проекта: приём держится на маске и такте, а не на
конкретной гарнитуре. С плотным гротеском и отрицательным трекингом
волна выглядит собраннее — тогда и пригодится запас по бокам у маски.
Кнопка меняет key и перемонтирует заголовок, чтобы волну можно было
отсмотреть несколько раз подряд. */
export default function LetterRiseHeadingDemo() {
const [run, setRun] = React.useState(0);
return (
<div
className="relative flex min-h-screen w-full flex-col items-center justify-center overflow-hidden px-6"
style={{
background:
"radial-gradient(70% 90% at 50% 52%, #f4573c 0%, #a3222c 34%, #4a0e17 62%, #1a060b 88%, #0b0306 100%)",
}}
>
<p
className="mb-5 text-center text-[11px] font-bold uppercase text-white/70"
style={{ letterSpacing: "0.34em" }}
>
Type in motion
</p>
<LetterRiseHeading
key={run}
text="Creative Studio"
className="text-center text-white"
style={{
fontSize: "clamp(26px, 6.4vw, 92px)",
fontWeight: 500,
lineHeight: 0.95,
letterSpacing: "-0.045em",
textTransform: "uppercase",
}}
shadow="0 14px 30px rgba(0,0,0,.45)"
/>
<button
type="button"
onClick={() => setRun((n) => n + 1)}
className="mt-10 rounded-full bg-white/10 px-6 py-2.5 text-[12px] uppercase text-white/90 ring-1 ring-inset ring-white/25 transition hover:bg-white/20"
style={{ letterSpacing: "0.14em" }}
>
Replay
</button>
</div>
);
}