An editor window that types its code as you scroll, with natural pauses at line ends, syntax colors, a caret and a minimap filling in. When the last line lands, a terminal slides up and runs it.
import { createServer } from "@tessel/edge";
const app = createServer({ region: "auto" });
app.get("/health", () => ({ ok: true }));
app.post("/orders", async (req) => {
const order = await req.json();
const id = await db.orders.insert(order);
return { id, status: "queued" };
});
app.listen(8080);npx shadcn@latest add https://hyperblur.dev/r/motion-code-reveal.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/motion-code-reveal.tsx.
import { MotionCodeReveal } from "@/components/hyperblur/motion-code-reveal"
<MotionCodeReveal code={"const greeting = \"hello\";\nconsole.log(greeting);"} output={["$ node app.js", "hello"]} />| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | A small server file | Source to type. Strings, numbers, keywords and calls are colored. |
| filename | string | "server.ts" | Name on the active tab. |
| tabs | string[] | ["db.ts"] | Extra inactive tabs. |
| output | string[] | 3 terminal lines | Lines the terminal prints after typing. The first is the command. Empty array skips the terminal. |
| accent | string | "#2f7bff" | Accent color for highlights, rails and glows. |
| progress | number | undefined | Controlled progress from 0 to 1. When set, scroll tracking and autoplay are ignored. |
| autoPlay | boolean | false | Loops the progress by itself, forward, hold, then back. Use it for previews where nobody scrolls. |
| duration | number | 7 | Seconds for one forward pass of the autoplay loop. |
| length | number | 3 | Scroll distance in stage heights while the section is pinned. Ignored with progress or autoPlay. |
| height | string | "100vh" | Height of the pinned stage. Use a pixel value when the section lives inside a scrolling container. |