KeyframeUI

Skyline Hero

A printed hero for a release-train tool: an editorial serif headline over a halftone city whose towers rise and light up on load. A Dot Rail under the nav runs on its own until a link is hovered, then jumps under it, and "Send a test train" sends a train across the elevated line at the foot of the city.

Hero Section

Built with Dot Rail and Skyline

Uses motion, clsx, tailwind-merge

Inspired by Citylines on vibrant.design

Open in ChatGPTOpen in Claude

Installation

The CLI writes components/skyline-hero.tsx, the components it's built with (components/ui/dot-rail.tsx and components/ui/skyline.tsx) and lib/utils.ts, and installs motion, clsx and tailwind-merge. It needs the @keyframeui registry in components.json; add it once per project.

npx shadcn@latest add @keyframeui/skyline-hero

Then put it where the section goes. The copy, links and data sit in constants at the top of the file, so making it yours starts there.

app/page.tsx
import { SkylineHero } from "@/components/skyline-hero";

export default function Page() {
  return <SkylineHero />;
}

Built with

Each of these is a component on its own, with its own examples and props. The block installs them for you.