Turning Requests Panel

Feature299: Turning Requests Panel

An ink panel that cycles through short exchanges: the request arrives in serif, the reply follows a beat later in mono, and thin bars underneath let you jump between them.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/feature299?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/feature299?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/feature299.tsx plus the button22 sliding-marker pill and the text1 word stagger it uses.

Quick start

The installed file exports feature299Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Feature299, feature299Demo } from "@/components/beste/block/feature299";

export default function Page() {
  return <Feature299 {...feature299Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Feature299 } from "@/components/beste/block/feature299";

export default function Page() {
  return (
    <Feature299
      eyebrow="Plain words in, finished code out"
      heading="Every request is one sentence."
      description="There is no syntax to learn and no picker to scroll."
      exchanges={[
        { prompt: "Add a pricing section with three plans.", reply: "Placed under the hero, middle plan featured." },
        { prompt: "We need a changelog page.", reply: "Added a ruled changelog with version tags." },
      ]}
      interval={4}
      labels={{ you: "You", agent: "Agent" }}
      command="npx your-cli@latest"
      copyLabel="Copy command"
      copiedLabel="Copied"
      buttons={[{ label: "See what it builds", href: "/blocks" }]}
    />
  );
}

Props

type Exchange = {
  prompt: string;
  reply: string;
};

type ActionButton = {
  label: string;
  href: string;
  tone?: "primary" | "light" | "dark" | "outline";
};

Behavior notes

• The reply is delayed 0.9 seconds behind its own prompt, which is the whole trick: the pair reads as a question answered rather than as two lines appearing together.
• The cycle pauses while the pointer is over the panel, so nobody loses a sentence halfway through reading it.
• The panel holds a min-h, so a short exchange and a long one occupy the same height and the page below never shifts as the cycle turns.
• The bars are plain buttons with aria-current and the prompt as their accessible name, not tab roles, since there are no panels for them to control.
• Under reduced motion the blur and travel are dropped but the cycle continues, because the content itself is the point rather than the movement.
• The interval is a prop in seconds rather than milliseconds, and is converted once when the timer is set.
• Clicking a bar sets the active exchange without stopping the timer, so the cycle resumes from wherever you jumped to.