{ "summary": "A technical yet organic system that utilizes a blueprint-style loading state. It emphasizes 'draft to reality' transitions where components are first drawn as jittery SVG paths and then morph into clean, rounded cards. The aesthetic is professional, minimalist, and motion-centric.", "style": { "description": "full prompt", "prompt": "Build me a small React app that shows a \"pencil sketch\" loading state for a SaaS dashboard: the page sketches itself in blue pencil, each chart's sketch morphs to the real data while the numbers count up from zero, then the real UI fills in. A Replay button in the bottom-right corner runs it again.\n\nRecreate it exactly. Create the project below with every file written exactly as given, character for character. Don't simplify, refactor, rename, reformat or \"improve\" anything: the animation depends on these exact values. Don't add any files beyond these.\n\nThen run `npm install` and `npm run dev`, and open the local address it prints.\n\nThe logo and avatar load from hosted URLs, so there are no image files to add.\n\n## Files\n\n### `package.json`\n\n```json\n{\n \"name\": \"pencil-sketch-loader\",\n \"private\": true,\n \"version\": \"1.0.0\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"tsc && vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"react\": \"^19.2.0\",\n \"react-dom\": \"^19.2.0\"\n },\n \"devDependencies\": {\n \"@tailwindcss/vite\": \"^4.1.0\",\n \"@types/node\": \"^22.20.5\",\n \"@types/react\": \"^19.2.0\",\n \"@types/react-dom\": \"^19.2.0\",\n \"@vitejs/plugin-react\": \"^5.0.0\",\n \"tailwindcss\": \"^4.1.0\",\n \"typescript\": \"^5.6.0\",\n \"vite\": \"^7.0.0\"\n }\n}\n```\n\n### `vite.config.ts`\n\n```ts\nimport { fileURLToPath, URL } from \"node:url\";\nimport tailwindcss from \"@tailwindcss/vite\";\nimport react from \"@vitejs/plugin-react\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n plugins: [react(), tailwindcss()],\n resolve: { alias: { \"@\": fileURLToPath(new URL(\"./src\", import.meta.url)) } },\n});\n```\n\n### `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"target\": \"ES2022\",\n \"lib\": [\n \"ES2022\",\n \"DOM\",\n \"DOM.Iterable\"\n ],\n \"module\": \"ESNext\",\n \"moduleResolution\": \"bundler\",\n \"jsx\": \"react-jsx\",\n \"strict\": true,\n \"noEmit\": true,\n \"skipLibCheck\": true,\n \"isolatedModules\": true,\n \"types\": [\n \"vite/client\",\n \"node\"\n ],\n \"paths\": {\n \"@/*\": [\n \"./src/*\"\n ]\n }\n },\n \"include\": [\n \"src\",\n \"vite.config.ts\"\n ]\n}\n```\n\n### `index.html`\n\n```html\n\n\n \n \n \n Pocket Dashboard: pencil sketch loading state\n \n \n \n \n \n

\n \n \n\n```\n\n### `src/main.tsx`\n\n```tsx\nimport { StrictMode } from \"react\";\nimport { createRoot } from \"react-dom/client\";\nimport { App } from \"./App\";\nimport \"./index.css\";\n\ncreateRoot(document.getElementById(\"root\")!).render(\n \n \n ,\n);\n```\n\n### `src/index.css`\n\n```css\n@import \"tailwindcss\";\n@import \"./components/plot-reveal/plot-reveal.css\";\n\n:root {\n --paper: #fafaf8;\n --card: #ffffff;\n --ink: #0a0c10;\n --mid: #565b64;\n --muted: #8b909a;\n --line: #e7e9ef;\n /* The pencil colour. */\n --plot: #2e6fff;\n --positive: #16834a;\n --positive-soft: #e6f5ec;\n --well: #f3f4f6;\n --previous: #cbd5e1;\n /* Every chart stays on one hue: a blue ramp, light to deep. */\n --blue-1: #dbe5ff;\n --blue-2: #b2c7ff;\n --blue-3: #7c9fff;\n --blue-4: #3d6ef5;\n --blue-5: #1d47c8;\n color-scheme: light;\n}\n\n/* Diagonal stripes over a fill, for the funnel bars and stacked-bar segments. */\n.hatch {\n background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.32) 0 1.5px, transparent 1.5px 6px);\n}\n\n@theme inline {\n --color-paper: var(--paper);\n --color-card: var(--card);\n --color-ink: var(--ink);\n --color-mid: var(--mid);\n --color-muted: var(--muted);\n --color-line: var(--line);\n --color-plot: var(--plot);\n --color-positive: var(--positive);\n --color-positive-soft: var(--positive-soft);\n --color-well: var(--well);\n --color-previous: var(--previous);\n --color-blue-1: var(--blue-1);\n --color-blue-2: var(--blue-2);\n --color-blue-3: var(--blue-3);\n --color-blue-4: var(--blue-4);\n --color-blue-5: var(--blue-5);\n\n --font-sans: \"Plus Jakarta Sans\", ui-sans-serif, system-ui, sans-serif;\n --font-mono: \"JetBrains Mono\", ui-monospace, \"SF Mono\", monospace;\n}\n\nhtml {\n background: var(--paper);\n color: var(--ink);\n font-family: var(--font-sans);\n -webkit-font-smoothing: antialiased;\n}\n\nbody {\n margin: 0;\n}\n```\n\n### `src/App.tsx`\n\n```tsx\nimport { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { DASHBOARD_ROW, DASHBOARD_WIDTH, ReplyTrendPanel } from \"@/components/demo/dashboard-widgets\";\nimport { PlotReveal } from \"@/components/plot-reveal\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Pocket Dashboard: a loading state that sketches the dashboard in blue pencil, morphs each sketch to the real data,\n * then fills in the UI. Settings: normal speed, 1500ms between charts, data arrives straight away, morph on, labels off.\n */\n\n/** Gap between one chart's reveal starting and the next, top left first down to bottom right. */\nconst STAGGER = 1500;\n/** The charts wait this long so the page header is sketched first. */\nconst HEADER_LEAD = 500;\n/** The pencil's leader lines and spec tags. They hang off each card's right side, over its neighbour, so they're off. */\nconst LABELS = false;\n/** Sketch each chart with generic data, then morph the pencil to the real numbers before it fills in. */\nconst MORPH = true;\n\n/** Page header (56) + gap (24) + trend (300) + gap (16) + row of tiles (372). Everything is scaled from this size. */\nconst DASHBOARD_HEIGHT = 768;\nconst MAX_SCALE = 1.25;\n\n/**\n * Scales the dashboard to fill the space it's given, so it frames the same on any screen.\n * The pencil layer lives inside the scaled box and measure.ts is scale-aware, so the drawing stays registered.\n */\nconst useFitScale = () => {\n const ref = useRef(null);\n const [scale, setScale] = useState(1);\n\n // Layout effect: fit before the first paint, so the page never shows a frame at the wrong size.\n useLayoutEffect(() => {\n const el = ref.current;\n if (!el) return;\n const fit = () => setScale(Math.min(el.clientWidth / DASHBOARD_WIDTH, el.clientHeight / DASHBOARD_HEIGHT, MAX_SCALE));\n fit();\n const observer = new ResizeObserver(fit);\n observer.observe(el);\n return () => observer.disconnect();\n }, []);\n\n return [ref, scale] as const;\n};\n\nconst Icon = ({ children, className }: { children: ReactNode; className?: string }) => (\n \n {children}\n \n);\n\ntype StaggeredProps = { delay: number; layer: number; children: ReactNode };\n\n/**\n * Holds a chart's space (invisible), then starts its reveal after `delay`.\n * `layer` stacks earlier charts above later ones, so a chart's labels would sit over its right-hand neighbour, not under it.\n */\nconst Staggered = ({ delay, layer, children }: StaggeredProps) => {\n const [started, setStarted] = useState(delay === 0);\n\n useEffect(() => {\n if (started) return;\n const t = setTimeout(() => setStarted(true), delay);\n return () => clearTimeout(t);\n }, [delay, started]);\n\n return started ? (\n

\n \n {children}\n \n

\n ) : (\n

{children}

\n );\n};\n\nconst TABS = [\n { label: \"Overview\", active: true },\n { label: \"Pipeline\" },\n { label: \"Inbox\", count: 12 },\n { label: \"Contacts\" },\n { label: \"Reports\" },\n];\n\nconst TopBar = () => (\n

\n Pocket\n $\"\"$ \n Studio\n

\n\n \n\n \n \n \n \n \n \n \n $\"\"$ \n \n

\n);\n\n/** Title and date range, sketched in pencil before any chart. */\nconst PageHeader = () => (\n

\n \n

\n Pocket Dashboard\n

\n \n \n \n \n \n \n \n \n \n Last 7 days\n \n \n

\n);\n\nexport const App = () => {\n // Bumping `run` remounts every PlotReveal (new keys), which replays the whole reveal.\n const [run, setRun] = useState(1);\n const [fitRef, scale] = useFitScale();\n\n return (\n

\n \n\n

\n \n

\n \n \n \n

\n {DASHBOARD_ROW.map(({ id, Component }, i) => (\n \n \n \n ))}\n

\n\n setRun((r) => r + 1)}\n className=\"fixed right-5 bottom-5 z-50 flex h-10 items-center gap-2 rounded-full bg-ink pr-5 pl-4 text-[14px] font-medium text-paper shadow-[0_2px_8px_rgb(2_6_23/0.12),0_16px_40px_-12px_rgb(2_6_23/0.3)] transition-transform active:scale-95\"\n >\n \n Replay\n \n

\n );\n};\n```\n\n### `src/lib/cn.ts`\n\n```ts\nexport const cn = (...classes: (string | false | null | undefined)[]) => classes.filter(Boolean).join(\" \");\n```\n\n### `src/components/demo/dashboard-widgets.tsx`\n\n```tsx\nimport type { ReactNode } from \"react\";\nimport { usePlotPhase } from \"@/components/plot-reveal\";\nimport { cn } from \"@/lib/cn\";\n\n/**\n * Film two's widgets. They follow metric-widgets.tsx but stay on one blue ramp and are sized for the dashboard:\n * a full-width trend over a row of four. Kept apart so the filmed originals don't change.\n *\n * Each chart reads usePlotPhase: while it's sketched it shows generic data (bars at the average, a flat line,\n * equal segments), so the pencil visibly adjusts to the real numbers before they fill in.\n */\n\n/** The dashboard is laid out at this width, then scaled to fit the screen (see film-two.tsx). */\nexport const DASHBOARD_WIDTH = 1312;\nconst GAP = 16;\nconst TILE_W = (DASHBOARD_WIDTH - GAP * 3) / 4;\n\ntype PanelProps = { width: number; className?: string; children: ReactNode };\n\nconst Panel = ({ width, className, children }: PanelProps) => (\n \n {children}\n