Landing Code Showcase

1"use client";
2 
3import { Timegroup } from "@editframe/react";
4 
5const FONT_FAMILY =
6  "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif";
7const MONO_FAMILY =
8  "var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace";
9 
10/* -------------------------------------------------------------------------- */
11/*                                  Tokens                                    */
12/* -------------------------------------------------------------------------- */
13 
14const PEACH = "#FFB38E";
15const LAVENDER = "#D4B3FF";
16const MINT = "#A1EEBD";
17const STAGE_BG = "#0A090E";
18const PANEL_BG = "#141318";
19 
20/* -------------------------------------------------------------------------- */
21/*                              Timeline (ms)                                 */
22/* -------------------------------------------------------------------------- */
23 
24const SCENES = {
25  blur: { duration: 3000, start: 0 },
26  dashboard: { duration: 3666, start: 4333 },
27  endHold: 2666,
28  glassWipe: { duration: 2000, start: 7666 },
29  maskedSlide: { duration: 4000, start: 9666 },
30  push1: { duration: 2000, start: 2333 },
31  push2: { duration: 2000, start: 13_333 },
32  terminal: { duration: 6000, start: 15_333 },
33};
34 
35const TOTAL_DURATION_MS =
36  SCENES.terminal.start + SCENES.terminal.duration + SCENES.endHold;
37 
38/* -------------------------------------------------------------------------- */
39/*                              Code timeline                                 */
40/* -------------------------------------------------------------------------- */
41 
42interface CodeStep {
43  startMs: number;
44  code: string;
45  highlight?: string;
46}
47 
48const HEADER = `import { BlurReveal, DashboardPopulate, MaskedSlideReveal,
49  TerminalToBrowserDeploy, Transition } from "@/components/framecn";
50 
51export default function Scene() {
52  return (
53    <>
54`;
55 
56const FOOTER = `    </>
57  );
58}`;
59 
60const STEPS: CodeStep[] = [
61  { code: `      <BlurReveal text="Build faster." />\n`, startMs: 133 },
62  {
63    code: `      <Transition type="spatial-push" />\n`,
64    highlight: "spatial-push",
65    startMs: SCENES.push1.start,
66  },
67  {
68    code: `      <DashboardPopulate data={metrics} />\n`,
69    startMs: SCENES.dashboard.start,
70  },
71  {
72    code: `      <Transition type="glass-wipe" />\n`,
73    highlight: "glass-wipe",
74    startMs: SCENES.glassWipe.start,
75  },
76  {
77    code: `      <MaskedSlideReveal text="Ship to production." />\n`,
78    startMs: SCENES.maskedSlide.start,
79  },
80  {
81// … truncated