@sansavision/create-vidra-app 0.1.7-alpha.0

package/index.js

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+
+// ─── create-vidra-app ───────────────────────────────────────────────
+// Scaffolds a new Vidra project with SDK, Player, and Web Capture
+// ready to go.
+//
+// Usage:
+//   npx @sansavision/create-vidra-app my-video
+//   cd my-video && npm install && npm run dev
+
+import { mkdirSync, writeFileSync, readFileSync, readdirSync, statSync, copyFileSync } from "fs";
+import { join, dirname, resolve, basename } from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const args = process.argv.slice(2);
+const projectName = args[0];
+
+if (!projectName) {
+  console.log(`
+  \x1b[1m\x1b[35m🎬 create-vidra-app\x1b[0m
+
+  Scaffold a new Vidra video project.
+
+  \x1b[1mUsage:\x1b[0m
+    npx @sansavision/create-vidra-app \x1b[36m<project-name>\x1b[0m
+
+  \x1b[1mExample:\x1b[0m
+    npx @sansavision/create-vidra-app my-video
+    cd my-video
+    npm install
+    npm run dev
+  `);
+  process.exit(1);
+}
+
+const targetDir = resolve(process.cwd(), projectName);
+const templateDir = join(__dirname, "template");
+const baseName = basename(targetDir);
+
+console.log();
+console.log(`  \x1b[1m\x1b[35m🎬 Creating Vidra project:\x1b[0m ${projectName}`);
+console.log();
+
+// Recursively copy template directory
+function copyDir(src, dest) {
+  mkdirSync(dest, { recursive: true });
+  for (const entry of readdirSync(src)) {
+    const srcPath = join(src, entry);
+    const destPath = join(dest, entry);
+    if (statSync(srcPath).isDirectory()) {
+      copyDir(srcPath, destPath);
+    } else {
+      let content = readFileSync(srcPath, "utf-8");
+      // Replace template variables
+      content = content.replace(/\{\{PROJECT_NAME\}\}/g, baseName);
+      writeFileSync(destPath, content);
+    }
+  }
+}
+
+copyDir(templateDir, targetDir);
+
+console.log(`  \x1b[32m✓\x1b[0m Project scaffolded at \x1b[1m${targetDir}\x1b[0m`);
+console.log();
+console.log(`  \x1b[1mNext steps:\x1b[0m`);
+console.log();
+console.log(`    cd ${projectName}`);
+console.log(`    npm install`);
+console.log(`    npm run dev          \x1b[2m# Live browser preview\x1b[0m`);
+console.log(`    npm run build:video  \x1b[2m# Generate project IR JSON\x1b[0m`);
+console.log();
+console.log(`  \x1b[2mTo render to MP4 (requires Vidra CLI):\x1b[0m`);
+console.log(`    vidra render video.vidra -o output.mp4`);
+console.log();
+console.log(`  \x1b[35m📖 Docs:\x1b[0m https://github.com/Sansa-Organisation/vidra`);
+console.log();

package/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "@sansavision/create-vidra-app",
+    "version": "0.1.7-alpha.0",
+    "description": "Scaffold a new Vidra video project — SDK, Player, Web Capture ready to go",
+    "bin": {
+        "create-vidra-app": "./index.js"
+    },
+    "type": "module",
+    "files": [
+        "index.js",
+        "template/**/*"
+    ],
+    "keywords": [
+        "vidra",
+        "video",
+        "create",
+        "scaffold",
+        "motion-graphics",
+        "programmatic-video"
+    ],
+    "author": "Sansa Vision",
+    "license": "MIT",
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/template/README.md

@@ -0,0 +1,47 @@
+# {{PROJECT_NAME}}
+
+A video project powered by [Vidra](https://github.com/Sansa-Organisation/vidra).
+
+## Quick Start
+
+```bash
+npm install
+npm run dev          # Open browser preview
+npm run build:video  # Generate project IR JSON
+```
+
+## Render to MP4
+
+```bash
+# Using the Vidra CLI:
+vidra render video.vidra -o output.mp4
+
+# Or use the visual editor:
+vidra editor video.vidra
+```
+
+## Project Structure
+
+```
+├── index.html        ← Browser preview (Vite dev server)
+├── src/
+│   └── video.js      ← SDK-based video builder
+├── web/
+│   └── chart.html    ← Web scene with capture bridge
+├── video.vidra       ← VidraScript DSL version
+└── package.json
+```
+
+## Packages Used
+
+| Package | Purpose |
+|---------|---------|
+| `@sansavision/vidra-sdk` | Build video projects programmatically |
+| `@sansavision/vidra-player` | WASM-powered browser renderer |
+| `@sansavision/vidra-web-capture` | Bridge for web scenes |
+
+## Learn More
+
+- [Vidra Documentation](https://github.com/Sansa-Organisation/vidra/tree/main/docs)
+- [VidraScript Reference](https://github.com/Sansa-Organisation/vidra/blob/main/docs/vidrascript.md)
+- [Web Scenes Guide](https://github.com/Sansa-Organisation/vidra/blob/main/docs/web-scenes.md)

package/template/index.html

@@ -0,0 +1,262 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{PROJECT_NAME}} — Preview</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            min-height: 100vh;
+            background: #0d1117;
+            color: #e6edf3;
+            font-family: 'Inter', system-ui, -apple-system, sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 40px 20px;
+        }
+        h1 {
+            font-size: 28px;
+            font-weight: 700;
+            margin-bottom: 8px;
+            background: linear-gradient(135deg, #58a6ff, #d2a8ff);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .subtitle {
+            color: #8b949e;
+            font-size: 14px;
+            margin-bottom: 32px;
+        }
+        .canvas-wrapper {
+            position: relative;
+            border-radius: 12px;
+            overflow: hidden;
+            box-shadow: 0 0 0 1px rgba(240,246,252,0.1), 0 16px 48px rgba(0,0,0,0.4);
+        }
+        canvas {
+            display: block;
+            background: #000;
+        }
+        .controls {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-top: 20px;
+            padding: 12px 20px;
+            background: #161b22;
+            border-radius: 10px;
+            border: 1px solid #30363d;
+        }
+        button {
+            background: #238636;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            padding: 8px 20px;
+            font-size: 14px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: background 0.15s;
+        }
+        button:hover { background: #2ea043; }
+        button.secondary {
+            background: #21262d;
+            border: 1px solid #30363d;
+        }
+        button.secondary:hover { background: #30363d; }
+        .frame-display {
+            font-family: 'SF Mono', 'JetBrains Mono', monospace;
+            font-size: 13px;
+            color: #8b949e;
+            min-width: 100px;
+            text-align: center;
+        }
+        .info-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 16px;
+            margin-top: 24px;
+            max-width: 800px;
+            width: 100%;
+        }
+        .info-card {
+            background: #161b22;
+            border: 1px solid #30363d;
+            border-radius: 10px;
+            padding: 20px;
+        }
+        .info-card h3 {
+            font-size: 13px;
+            color: #8b949e;
+            font-weight: 500;
+            margin-bottom: 8px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+        .info-card p {
+            font-size: 15px;
+            line-height: 1.5;
+        }
+        .info-card code {
+            background: #0d1117;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 13px;
+            color: #58a6ff;
+        }
+    </style>
+</head>
+<body>
+    <h1>🎬 {{PROJECT_NAME}}</h1>
+    <p class="subtitle">Vidra Video Project — Browser Preview</p>
+
+    <div class="canvas-wrapper">
+        <canvas id="preview" width="960" height="540"></canvas>
+    </div>
+
+    <div class="controls">
+        <button id="playBtn" onclick="togglePlay()">▶ Play</button>
+        <button class="secondary" onclick="seekStart()">⏮ Start</button>
+        <div class="frame-display" id="frameDisplay">Frame 0 / 0</div>
+        <button class="secondary" onclick="seekEnd()">⏭ End</button>
+    </div>
+
+    <div class="info-grid">
+        <div class="info-card">
+            <h3>SDK Video</h3>
+            <p>Edit <code>src/video.js</code> to build your video programmatically using the Vidra SDK.</p>
+        </div>
+        <div class="info-card">
+            <h3>Web Scene</h3>
+            <p>Edit <code>web/chart.html</code> to create interactive web scenes using the capture bridge.</p>
+        </div>
+        <div class="info-card">
+            <h3>Render</h3>
+            <p>Run <code>vidra render video.vidra</code> to export your project as an MP4 file.</p>
+        </div>
+    </div>
+
+    <script type="module">
+        // This preview page demonstrates how @sansavision/vidra-player
+        // would render a project in the browser. For now, it shows a
+        // placeholder with the project structure info.
+
+        const canvas = document.getElementById('preview');
+        const ctx = canvas.getContext('2d');
+        const frameDisplay = document.getElementById('frameDisplay');
+        const playBtn = document.getElementById('playBtn');
+
+        const FPS = 30;
+        const TOTAL_FRAMES = 330; // 11 seconds at 30fps
+        let currentFrame = 0;
+        let playing = false;
+        let lastTime = 0;
+
+        function drawFrame(frame) {
+            const time = frame / FPS;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+            // Background
+            ctx.fillStyle = '#0d1117';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            if (time < 4) {
+                // Scene 1: Intro
+                const t = Math.min(time / 0.8, 1);
+                const eased = 1 - Math.pow(1 - t, 3);
+
+                ctx.globalAlpha = eased;
+                ctx.fillStyle = '#e6edf3';
+                ctx.font = 'bold 36px Inter, system-ui';
+                ctx.textAlign = 'center';
+                ctx.fillText('Welcome to {{PROJECT_NAME}}', canvas.width / 2, canvas.height / 2 - 20);
+
+                const t2 = Math.max(0, Math.min((time - 0.3) / 0.8, 1));
+                ctx.globalAlpha = 1 - Math.pow(1 - t2, 3);
+                ctx.fillStyle = '#8b949e';
+                ctx.font = '16px Inter, system-ui';
+                ctx.fillText('Built with Vidra SDK', canvas.width / 2, canvas.height / 2 + 30);
+
+                // Accent line
+                const t3 = Math.max(0, Math.min((time - 0.6) / 0.6, 1));
+                ctx.globalAlpha = 1 - Math.pow(1 - t3, 3);
+                const lineWidth = t3 * 100;
+                ctx.fillStyle = '#58a6ff';
+                ctx.fillRect(canvas.width / 2 - lineWidth, canvas.height / 2 + 60, lineWidth * 2, 2);
+
+            } else if (time < 8) {
+                // Scene 2: Content
+                const st = time - 4;
+                ctx.fillStyle = '#161b22';
+                ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+                const t1 = Math.min(st / 0.6, 1);
+                ctx.globalAlpha = 1 - Math.pow(1 - t1, 3);
+                ctx.fillStyle = '#e6edf3';
+                ctx.font = 'bold 28px Inter, system-ui';
+                ctx.textAlign = 'center';
+                ctx.fillText('Programmatic Video', canvas.width / 2, 150);
+
+                const bullets = ['✦ TypeScript SDK', '✦ GPU-accelerated rendering', '✦ Web scenes (React, D3, Three.js)'];
+                bullets.forEach((txt, i) => {
+                    const bt = Math.max(0, Math.min((st - 0.2 - i * 0.2) / 0.5, 1));
+                    ctx.globalAlpha = 1 - Math.pow(1 - bt, 3);
+                    ctx.fillStyle = '#58a6ff';
+                    ctx.font = '18px Inter, system-ui';
+                    ctx.fillText(txt, canvas.width / 2, 230 + i * 50);
+                });
+
+            } else {
+                // Scene 3: Outro
+                const st = time - 8;
+                ctx.globalAlpha = Math.min(st / 0.8, 1);
+                ctx.fillStyle = '#ffffff';
+                ctx.font = 'bold 24px Inter, system-ui';
+                ctx.textAlign = 'center';
+                ctx.fillText('Start building with Vidra', canvas.width / 2, canvas.height / 2 - 10);
+
+                const t2 = Math.max(0, Math.min((st - 0.4) / 0.6, 1));
+                ctx.globalAlpha = t2;
+                ctx.fillStyle = '#8b949e';
+                ctx.font = '12px Inter, system-ui';
+                ctx.fillText('github.com/Sansa-Organisation/vidra', canvas.width / 2, canvas.height / 2 + 30);
+            }
+
+            ctx.globalAlpha = 1;
+            frameDisplay.textContent = `Frame ${frame} / ${TOTAL_FRAMES}`;
+        }
+
+        function animate(timestamp) {
+            if (!playing) return;
+            if (!lastTime) lastTime = timestamp;
+            const delta = timestamp - lastTime;
+            if (delta >= 1000 / FPS) {
+                lastTime = timestamp;
+                currentFrame++;
+                if (currentFrame >= TOTAL_FRAMES) {
+                    currentFrame = 0;
+                }
+                drawFrame(currentFrame);
+            }
+            requestAnimationFrame(animate);
+        }
+
+        window.togglePlay = () => {
+            playing = !playing;
+            playBtn.textContent = playing ? '⏸ Pause' : '▶ Play';
+            if (playing) {
+                lastTime = 0;
+                requestAnimationFrame(animate);
+            }
+        };
+
+        window.seekStart = () => { currentFrame = 0; drawFrame(0); };
+        window.seekEnd = () => { currentFrame = TOTAL_FRAMES - 1; drawFrame(currentFrame); };
+
+        // Initial render
+        drawFrame(0);
+    </script>
+</body>
+</html>

package/template/package.json

@@ -0,0 +1,20 @@
+{
+    "name": "{{PROJECT_NAME}}",
+    "version": "1.0.0",
+    "private": true,
+    "type": "module",
+    "scripts": {
+        "dev": "npx vite",
+        "build": "npx vite build",
+        "build:video": "node src/video.js",
+        "preview": "npx vite preview"
+    },
+    "dependencies": {
+        "@sansavision/vidra-sdk": "^0.1.7-alpha.0",
+        "@sansavision/vidra-player": "^0.1.7-alpha.0",
+        "@sansavision/vidra-web-capture": "^0.1.7-alpha.0"
+    },
+    "devDependencies": {
+        "vite": "^7.3.1"
+    }
+}

package/template/src/video.js

@@ -0,0 +1,111 @@
+// ─── {{PROJECT_NAME}} — Video Project (SDK) ────────────────────────
+//
+// This file uses the Vidra SDK to build a video project programmatically.
+// Run it with: npm run build:video
+//
+// The output is a JSON IR that can be rendered by the Vidra CLI:
+//   vidra render --ir output.json -o video.mp4
+
+import {
+  Project,
+  Scene,
+  Layer,
+  Easing,
+  hex,
+} from "@sansavision/vidra-sdk";
+
+// ── Build the project ───────────────────────────────────────────────
+
+const project = new Project({ width: 1920, height: 1080, fps: 30 })
+  // Scene 1: Intro
+  .addScene(
+    new Scene("intro", 4)
+      // Dark gradient background
+      .addLayer(new Layer("bg").solid("#0d1117"))
+
+      // Main title — fades in and slides up
+      .addLayer(
+        new Layer("title")
+          .text("Welcome to {{PROJECT_NAME}}", "Inter", 72, "#e6edf3")
+          .position(960, 480)
+          .animate("opacity", 0, 1, 0.8, Easing.EaseOut)
+      )
+
+      // Subtitle
+      .addLayer(
+        new Layer("subtitle")
+          .text("Built with Vidra SDK", "Inter", 32, "#8b949e")
+          .position(960, 560)
+          .animate("opacity", 0, 1, 0.8, Easing.EaseOut, 0.3)
+      )
+
+      // Decorative shape
+      .addLayer(
+        new Layer("accent")
+          .shape("rect", { width: 200, height: 4, radius: 2, fill: "#58a6ff" })
+          .position(960, 620)
+          .animate("opacity", 0, 1, 0.6, Easing.EaseOut, 0.6)
+      )
+  )
+
+  // Scene 2: Content
+  .addScene(
+    new Scene("content", 4)
+      .addLayer(new Layer("bg2").solid("#161b22"))
+
+      .addLayer(
+        new Layer("heading")
+          .text("Programmatic Video", "Inter", 56, "#e6edf3")
+          .position(960, 300)
+          .animate("opacity", 0, 1, 0.6, Easing.EaseOut)
+      )
+
+      .addLayer(
+        new Layer("bullet1")
+          .text("✦ TypeScript SDK", "Inter", 36, "#58a6ff")
+          .position(960, 450)
+          .animate("opacity", 0, 1, 0.5, Easing.EaseOut, 0.2)
+      )
+
+      .addLayer(
+        new Layer("bullet2")
+          .text("✦ GPU-accelerated rendering", "Inter", 36, "#58a6ff")
+          .position(960, 520)
+          .animate("opacity", 0, 1, 0.5, Easing.EaseOut, 0.4)
+      )
+
+      .addLayer(
+        new Layer("bullet3")
+          .text("✦ Web scenes (React, D3, Three.js)", "Inter", 36, "#58a6ff")
+          .position(960, 590)
+          .animate("opacity", 0, 1, 0.5, Easing.EaseOut, 0.6)
+      )
+  )
+
+  // Scene 3: Outro
+  .addScene(
+    new Scene("outro", 3)
+      .addLayer(new Layer("bg3").solid("#0d1117"))
+
+      .addLayer(
+        new Layer("cta")
+          .text("Start building with Vidra", "Inter", 48, "#ffffff")
+          .position(960, 500)
+          .animate("opacity", 0, 1, 0.8, Easing.EaseOut)
+      )
+
+      .addLayer(
+        new Layer("url")
+          .text("github.com/Sansa-Organisation/vidra", "Inter", 24, "#8b949e")
+          .position(960, 580)
+          .animate("opacity", 0, 1, 0.6, Easing.EaseOut, 0.4)
+      )
+  );
+
+// ── Output ──────────────────────────────────────────────────────────
+
+const ir = project.build();
+const json = JSON.stringify(ir, null, 2);
+
+// Write to stdout (pipe to file: node src/video.js > project.json)
+console.log(json);

package/template/video.vidra

@@ -0,0 +1,81 @@
+// ─── {{PROJECT_NAME}} — VidraScript ─────────────────────────────────
+//
+// This is the same project defined in src/video.js, but written in
+// VidraScript DSL. Render it with the Vidra CLI:
+//
+//   vidra render video.vidra -o output.mp4
+//   vidra dev video.vidra           # live preview with hot reload
+
+project(1920, 1080, 30) {
+    scene("intro", 4s) {
+        layer("bg") {
+            solid(#0d1117)
+        }
+
+        layer("title") {
+            text("Welcome to {{PROJECT_NAME}}", font: "Inter", size: 72, color: #e6edf3)
+            position(960, 480)
+            animation(opacity, from: 0, to: 1, duration: 0.8s, easing: easeOut)
+        }
+
+        layer("subtitle") {
+            text("Built with Vidra SDK", font: "Inter", size: 32, color: #8b949e)
+            position(960, 560)
+            animation(opacity, from: 0, to: 1, duration: 0.8s, easing: easeOut)
+        }
+
+        layer("accent") {
+            shape(rect, width: 200, height: 4, radius: 2, fill: #58a6ff)
+            position(960, 620)
+            animation(opacity, from: 0, to: 1, duration: 0.6s, easing: easeOut)
+        }
+    }
+
+    scene("content", 4s) {
+        layer("bg2") {
+            solid(#161b22)
+        }
+
+        layer("heading") {
+            text("Programmatic Video", font: "Inter", size: 56, color: #e6edf3)
+            position(960, 300)
+            animation(opacity, from: 0, to: 1, duration: 0.6s, easing: easeOut)
+        }
+
+        layer("bullet1") {
+            text("TypeScript SDK", font: "Inter", size: 36, color: #58a6ff)
+            position(960, 450)
+            animation(opacity, from: 0, to: 1, duration: 0.5s, easing: easeOut)
+        }
+
+        layer("bullet2") {
+            text("GPU-accelerated rendering", font: "Inter", size: 36, color: #58a6ff)
+            position(960, 520)
+            animation(opacity, from: 0, to: 1, duration: 0.5s, easing: easeOut)
+        }
+
+        layer("bullet3") {
+            text("Web scenes with React & D3", font: "Inter", size: 36, color: #58a6ff)
+            position(960, 590)
+            animation(opacity, from: 0, to: 1, duration: 0.5s, easing: easeOut)
+        }
+    }
+
+    scene("outro", 3s) {
+        layer("bg3") {
+            solid(#0d1117)
+        }
+
+        layer("cta") {
+            text("Start building with Vidra", font: "Inter", size: 48, color: #ffffff)
+            position(960, 500)
+            animation(opacity, from: 0, to: 1, duration: 0.8s, easing: easeOut)
+        }
+
+        layer("url") {
+            text("github.com/Sansa-Organisation/vidra", font: "Inter", size: 24, color: #8b949e)
+            position(960, 580)
+            animation(opacity, from: 0, to: 1, duration: 0.6s, easing: easeOut)
+        }
+    }
+}

package/template/web/chart.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{{PROJECT_NAME}} — Web Scene</title>
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        body {
+            width: 100vw; height: 100vh;
+            background: transparent;
+            display: flex; align-items: center; justify-content: center;
+            font-family: 'Inter', system-ui, sans-serif;
+            overflow: hidden;
+        }
+        .container {
+            text-align: center;
+            color: white;
+        }
+        .bar-chart {
+            display: flex;
+            align-items: flex-end;
+            justify-content: center;
+            gap: 12px;
+            height: 300px;
+            margin-top: 40px;
+        }
+        .bar {
+            width: 60px;
+            border-radius: 8px 8px 0 0;
+            transition: height 0.3s ease;
+        }
+        .label {
+            color: #8b949e;
+            font-size: 14px;
+            margin-top: 8px;
+        }
+        h2 {
+            font-size: 28px;
+            font-weight: 600;
+            color: #e6edf3;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h2>Revenue by Quarter</h2>
+        <div class="bar-chart" id="chart"></div>
+    </div>
+
+    <script type="module">
+        import { VidraCapture } from '@sansavision/vidra-web-capture';
+
+        const capture = new VidraCapture();
+        const data = [
+            { label: 'Q1', value: 45, color: '#58a6ff' },
+            { label: 'Q2', value: 72, color: '#3fb950' },
+            { label: 'Q3', value: 58, color: '#d2a8ff' },
+            { label: 'Q4', value: 91, color: '#f0883e' },
+        ];
+
+        const chart = document.getElementById('chart');
+
+        // Create bars
+        data.forEach(d => {
+            const col = document.createElement('div');
+            col.innerHTML = `
+                <div class="bar" style="background: ${d.color}; height: 0px;"></div>
+                <div class="label">${d.label}</div>
+            `;
+            chart.appendChild(col);
+        });
+
+        const bars = chart.querySelectorAll('.bar');
+
+        function render() {
+            const { time } = capture.getState();
+
+            // Animate bars growing over 2 seconds
+            const progress = Math.min(time / 2, 1);
+            const eased = 1 - Math.pow(1 - progress, 3); // ease-out cubic
+
+            data.forEach((d, i) => {
+                const delay = i * 0.15;
+                const t = Math.max(0, Math.min((time - delay) / 1.5, 1));
+                const barEased = 1 - Math.pow(1 - t, 3);
+                bars[i].style.height = `${barEased * d.value * 3}px`;
+            });
+
+            requestAnimationFrame(render);
+        }
+
+        render();
+    </script>
+</body>
+</html>