Slot Headline

Heroes 70

About

Hero title whose last word scrolls like a slot machine through the most popular coding agents

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Slot Headline to your project and fits it to your theme.

Code

How Slot Headline is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { SlotHeadline, CODING_AGENTS } from "@/components/ui/slot-headline";

export const settings = {
    prefix: "Deploy your apps from",
    interval: 1900,
    duration: 600,
};

type DemoProps = {
    prefix?: string;
    interval?: number;
    duration?: number;
};

export default function SlotHeadlineDemo(props: DemoProps) {
    const { prefix, interval, duration } = { ...settings, ...props };

    return (
        <div className="flex w-full items-center justify-center px-6 py-24">
            <SlotHeadline
                prefix={prefix}
                items={CODING_AGENTS}
                interval={interval}
                duration={duration}
                className="max-w-[896px]"
            />
        </div>
    );
}