proNew183 lines · framer-motion

Prompt Playground

Type a prompt, watch a written answer stream back. A full-width feature section with a prompt textarea, quick suggestion chips and a Run button that streams a pre-written answer back typewriter-style. Entirely client-side — nothing is ever sent over the network.

Use it for: An AI product page that wants visitors to feel the product's voice and pacing without wiring up a real model call.
Themes: Light + dark
License: Commercial use

Live

Try it

Type a prompt, watch it answer

A playground that streams back a written answer — nothing leaves this page.

Ready

The answer streams in here once you run it.

tsx

"use client";

import * as React from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "@/lib/utils";

function useReducedMotionSafe() {
  const prefersReduced = useReducedMotion();
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => setMounted(true), []);
  return mounted ? !!prefersReduced : false;
}

/**
 * Full-width feature section: a prompt textarea with suggestion chips and a Run
 * button that streams a canned, pre-written answer back, typewriter-style. Entirely
 * client-side — no network call is ever made.
 */

export interface PromptSuggestion {
  label: string;
  prompt: string;

The rest is in Pro.

Full source, the rebuild prompt and registry install unlock with Pro or Lifetime.

Get Pro

How it behaves

→Suggestion chips fill the textarea with a matching prompt; running with a matched prompt streams that prompt's own canned answer, otherwise a generic default answer streams instead.
→The answer reveals one character at a time on an interval tied to typingSpeed, with a blinking caret while streaming; the Run button disables mid-stream and relabels to "Run again" once done.
→Starting a new run clears any in-flight interval first, so rapid re-runs never leave two streams racing each other, and the interval is also cleared on unmount.
→prefers-reduced-motion skips the character-by-character reveal and the caret blink, showing the finished answer immediately.
→The textarea is a real <textarea>; the whole flow is UI-only and makes no network request.

Accessibility

✓The answer panel is `aria-live="polite"` so screen readers announce the streamed text as it completes, not character by character.
✓The Run button's disabled and label states reflect the current status in real text, not colour alone.
✓Honours prefers-reduced-motion.