create-rakta-app 0.1.8 → 0.2.0

package/dist/index.js

@@ -1666,6 +1666,632 @@ function writeProjectFiles(projectRoot, generatedFiles) {
 // src/generator.ts
 import { readFileSync } from "fs";
 
+// src/starter.ts
+var STARTER_TYPES_CODE = `export interface SystemMetric {
+  name: string;
+  value: string | number;
+  status: "nominal" | "warning" | "critical";
+}
+
+export interface GameHighScore {
+  name: string;
+  score: number;
+  date: string;
+}
+
+export type AestheticUnit = "LENIS-MODERN" | "RETRO-CYBER" | "NEO-BRUTALIST";
+`;
+var STARTER_AUDIO_CODE = `let audioContext: AudioContext | null = null;
+
+function getAudioContext(): AudioContext | null {
+  if (typeof window === "undefined") return null;
+
+  const AudioContextCtor = window.AudioContext;
+  if (!AudioContextCtor) return null;
+
+  audioContext ??= new AudioContextCtor();
+  return audioContext;
+}
+
+function playTone(frequency: number, durationMs: number, type: OscillatorType): void {
+  const context = getAudioContext();
+  if (!context) return;
+
+  const oscillator = context.createOscillator();
+  const gain = context.createGain();
+
+  oscillator.type = type;
+  oscillator.frequency.setValueAtTime(frequency, context.currentTime);
+  gain.gain.setValueAtTime(0.045, context.currentTime);
+  gain.gain.exponentialRampToValueAtTime(0.001, context.currentTime + durationMs / 1000);
+
+  oscillator.connect(gain);
+  gain.connect(context.destination);
+  oscillator.start();
+  oscillator.stop(context.currentTime + durationMs / 1000);
+}
+
+export function playJumpSound(): void {
+  playTone(560, 90, "triangle");
+}
+
+export function playScoreSound(): void {
+  playTone(880, 120, "square");
+}
+`;
+var STARTER_SHRIMP_CHARACTER_CODE = `interface ShrimpCharacterProps {
+  status: "IDLE" | "SWIMMING" | "JUMPING" | "DEAD";
+  playerY: number;
+  rotation?: number;
+}
+
+export default function ShrimpCharacter({
+  status,
+  playerY,
+  rotation,
+}: ShrimpCharacterProps) {
+  const isDead = status === "DEAD";
+  const isSwimming = status === "SWIMMING";
+  const finalRotation = rotation ?? (isDead ? 180 : status === "JUMPING" ? -10 : 0);
+  const shrimpColor = isDead ? "fill-orange-400" : "fill-rose-500";
+
+  return (
+    <div
+      className="relative flex h-16 w-16 select-none items-center justify-center transition-transform duration-75"
+      style={{ transform: \`translateY(\${-playerY}px) rotate(\${finalRotation}deg)\` }}
+    >
+      <svg
+        aria-label={isDead ? "Shrimp failed the run" : "Rakta shrimp runner"}
+        role="img"
+        viewBox="0 0 100 100"
+        className={\`h-full w-full drop-shadow-[0_4px_12px_rgba(244,63,94,0.32)] \${isSwimming ? "animate-pulse" : ""}\`}
+      >
+        <path
+          d="M 30 46 C 25 32, 45 22, 58 28 C 65 31, 62 48, 55 54 C 44 58, 35 55, 30 46 Z"
+          className={shrimpColor}
+        />
+        <path
+          d="M 55 30 C 65 24, 76 34, 74 46 C 72 54, 62 55, 55 48 Z"
+          className={shrimpColor}
+        />
+        <path
+          d="M 29 51 C 21 57, 16 61, 10 62"
+          stroke={isDead ? "#fb923c" : "#f43f5e"}
+          strokeWidth="4"
+          strokeLinecap="round"
+          fill="none"
+        />
+        <path
+          d="M 31 55 C 25 64, 22 70, 17 76"
+          stroke={isDead ? "#fb923c" : "#f43f5e"}
+          strokeWidth="3"
+          strokeLinecap="round"
+          fill="none"
+        />
+        <circle cx="66" cy="38" r="4.5" fill={isDead ? "#18181b" : "#000"} />
+        {!isDead && <circle cx="67.5" cy="36.5" r="1.2" fill="#fff" />}
+        <path
+          d="M 62 30 C 70 21, 82 19, 90 24"
+          stroke="#fb7185"
+          strokeWidth="2"
+          strokeLinecap="round"
+          fill="none"
+        />
+        <path
+          d="M 63 33 C 73 29, 84 31, 91 39"
+          stroke="#fb7185"
+          strokeWidth="2"
+          strokeLinecap="round"
+          fill="none"
+        />
+      </svg>
+    </div>
+  );
+}
+`;
+var STARTER_CORAL_OBSTACLE_CODE = `interface CoralObstacleProps {
+  position: "TOP" | "BOTTOM";
+  height: number;
+  width?: number;
+  paletteIndex?: number;
+  variant?: number;
+  scaleX?: number;
+}
+
+export default function CoralObstacle({
+  position,
+  height,
+  width = 64,
+  paletteIndex = 0,
+  variant = 0,
+  scaleX = 1,
+}: CoralObstacleProps) {
+  const fallbackPalette = {
+    primary: "#f43f5e",
+    secondary: "#fda4af",
+    shadow: "#9f1239",
+    polyps: "#ffe4e6",
+    name: "rose",
+  };
+  const palettes = [
+    fallbackPalette,
+    { primary: "#06b6d4", secondary: "#67e8f9", shadow: "#155e75", polyps: "#ecfeff", name: "cyan" },
+    { primary: "#a855f7", secondary: "#d8b4fe", shadow: "#581c87", polyps: "#faf5ff", name: "amethyst" },
+    { primary: "#f59e0b", secondary: "#fde047", shadow: "#78350f", polyps: "#fefce8", name: "amber" },
+    { primary: "#10b981", secondary: "#6ee7b7", shadow: "#065f46", polyps: "#e6fffa", name: "emerald" },
+  ];
+
+  const palette = palettes[paletteIndex % palettes.length] ?? fallbackPalette;
+  const coralId = \`coralGrad-\${palette.name}-\${variant}\`;
+  const flipped = position === "TOP" ? "scale(1, -1) translate(0, -120)" : undefined;
+
+  return (
+    <div
+      className="absolute flex items-center justify-center pointer-events-none"
+      style={{ height: \`\${height}px\`, width: \`\${width}px\`, transform: \`scaleX(\${scaleX})\` }}
+    >
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        viewBox="0 0 80 120"
+        className="h-full w-full drop-shadow-[0_6px_14px_rgba(0,0,0,0.7)]"
+        preserveAspectRatio="none"
+      >
+        <defs>
+          <linearGradient id={coralId} x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stopColor={palette.secondary} />
+            <stop offset="52%" stopColor={palette.primary} />
+            <stop offset="100%" stopColor={palette.shadow} />
+          </linearGradient>
+          <filter id={\`coralGlow-\${variant}\`}>
+            <feGaussianBlur stdDeviation="1.8" result="coloredBlur" />
+            <feMerge>
+              <feMergeNode in="coloredBlur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+
+        <g transform={flipped} filter={\`url(#coralGlow-\${variant})\`}>
+          <path
+            d="M 35 120 C 30 100, 15 90, 10 70 C 5 50, 20 40, 15 25 C 10 10, 25 5, 30 15 C 35 30, 28 45, 38 65 Q 42 90, 40 120"
+            fill={palette.shadow}
+            opacity="0.85"
+          />
+          <path
+            d="M 45 120 C 50 105, 65 95, 70 75 C 75 55, 60 45, 65 30 C 70 15, 55 10, 50 20 C 45 35, 52 45, 42 65 Q 40 90, 45 120"
+            fill={palette.shadow}
+            opacity="0.85"
+          />
+          <path
+            d="M 40 120 C 35 90, 20 80, 24 55 C 28 30, 15 20, 22 10 C 29 0, 37 15, 35 30 C 33 45, 42 55, 40 75 C 38 95, 42 110, 40 120 Z"
+            fill={\`url(#\${coralId})\`}
+          />
+          <path
+            d="M 40 120 C 45 95, 55 85, 52 65 C 49 45, 62 35, 58 20 C 54 5, 46 12, 48 25 C 50 38, 42 50, 44 70 C 46 90, 42 105, 40 120 Z"
+            fill={\`url(#\${coralId})\`}
+          />
+          <circle cx="22" cy="11" r="3.5" fill={palette.polyps} />
+          <circle cx="58" cy="21" r="3.5" fill={palette.polyps} />
+          <circle cx="30" cy="15" r="2.5" fill={palette.secondary} />
+          <circle cx="50" cy="20" r="2.5" fill={palette.secondary} />
+        </g>
+      </svg>
+    </div>
+  );
+}
+`;
+var STARTER_PAGE_CODE = `import { useCallback, useEffect, useRef, useState } from "react";
+import type { IconType } from "react-icons";
+import {
+  LuActivity,
+  LuCode,
+  LuCpu,
+  LuGauge,
+  LuRocket,
+  LuShieldCheck,
+  LuZap,
+} from "react-icons/lu";
+import CoralObstacle from "./components/CoralObstacle";
+import ShrimpCharacter from "./components/ShrimpCharacter";
+import type { AestheticUnit } from "./types";
+import { playJumpSound, playScoreSound } from "./utils/audio";
+
+type GameStatus = "IDLE" | "SWIMMING" | "JUMPING" | "DEAD";
+type SimSpeed = "NORMAL" | "FAST" | "TURBO";
+type StatusCard = { title: string; text: string; Icon: IconType };
+type FeatureCard = { number: string; title: string; text: string; Icon: IconType };
+
+const GAME_WIDTH = 720;
+const GAME_HEIGHT = 280;
+const SHRIMP_X = 82;
+const SHRIMP_SIZE = 58;
+const GRAVITY = 0.82;
+const JUMP_FORCE = 15;
+
+function getSpeedValue(speed: SimSpeed): number {
+  if (speed === "TURBO") return 8.2;
+  if (speed === "FAST") return 6.4;
+  return 5.2;
+}
+
+const statusCards: StatusCard[] = [
+  { title: "Routing", text: "File-based routes with fast client navigation", Icon: LuZap },
+  { title: "Metadata", text: "Default title, favicon, and SEO shell included", Icon: LuShieldCheck },
+  { title: "Runtime", text: "Bun-powered dev server on localhost:3000", Icon: LuCpu },
+];
+
+const featureCards: FeatureCard[] = [
+  { number: "01", title: "HOT RELOAD", text: "Pages, components, styles, layouts, stores, and route updates refresh immediately.", Icon: LuActivity },
+  { number: "02", title: "REACT ICONS", text: "Starter icons use react-icons/lu only. No lucide-react dependency ships.", Icon: LuCode },
+  { number: "03", title: "LOCAL FIRST", text: "The CLI prints and serves localhost:3000 for the frontend starter.", Icon: LuGauge },
+];
+
+export default function WelcomePage() {
+  const [status, setStatus] = useState<GameStatus>("IDLE");
+  const [score, setScore] = useState(0);
+  const [bestScore, setBestScore] = useState(() => {
+    if (typeof localStorage === "undefined") return 0;
+    return parseInt(localStorage.getItem("rakta_shrimprun_highscore") || "0", 10);
+  });
+  const [playerY, setPlayerY] = useState(0);
+  const [rotation, setRotation] = useState(0);
+  const [obstacleX, setObstacleX] = useState(GAME_WIDTH + 120);
+  const [obstacleHeight, setObstacleHeight] = useState(84);
+  const [obstacleWidth, setObstacleWidth] = useState(58);
+  const [obstaclePalette, setObstaclePalette] = useState(0);
+  const [obstacleVariant, setObstacleVariant] = useState(0);
+  const [obstacleScaleX, setObstacleScaleX] = useState(1);
+  const [aestheticUnit, setAestheticUnit] = useState<AestheticUnit>("LENIS-MODERN");
+  const [simSpeed, setSimSpeed] = useState<SimSpeed>("NORMAL");
+  const [lowLatencyMode, setLowLatencyMode] = useState(true);
+  const [configToast, setConfigToast] = useState<string | null>(null);
+
+  const statusRef = useRef(status);
+  const velocityRef = useRef(0);
+  const playerYRef = useRef(0);
+  const obstacleXRef = useRef(GAME_WIDTH + 120);
+  const scoreRef = useRef(0);
+  const lastTimeRef = useRef(0);
+  const animationRef = useRef<number | null>(null);
+  const toastTimerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    statusRef.current = status;
+  }, [status]);
+
+  const showConfigToast = useCallback((message: string) => {
+    setConfigToast(message);
+    if (toastTimerRef.current !== null) {
+      window.clearTimeout(toastTimerRef.current);
+    }
+    toastTimerRef.current = window.setTimeout(() => setConfigToast(null), 1400);
+  }, []);
+
+  const resetObstacle = useCallback(() => {
+    obstacleXRef.current = GAME_WIDTH + 80 + Math.random() * 220;
+    setObstacleX(obstacleXRef.current);
+    setObstacleHeight(58 + Math.floor(Math.random() * 82));
+    setObstacleWidth(42 + Math.floor(Math.random() * 32));
+    setObstaclePalette((value) => (value + 1) % 5);
+    setObstacleVariant((value) => (value + 1) % 3);
+    setObstacleScaleX(Math.random() > 0.5 ? 1 : -1);
+  }, []);
+
+  const startRun = useCallback(() => {
+    if (statusRef.current === "DEAD") {
+      scoreRef.current = 0;
+      setScore(0);
+      playerYRef.current = 0;
+      velocityRef.current = 0;
+      setPlayerY(0);
+      resetObstacle();
+    }
+
+    statusRef.current = "SWIMMING";
+    setStatus("SWIMMING");
+  }, [resetObstacle]);
+
+  const jump = useCallback(() => {
+    if (statusRef.current === "IDLE" || statusRef.current === "DEAD") {
+      startRun();
+    }
+
+    if (playerYRef.current <= 4) {
+      velocityRef.current = JUMP_FORCE;
+      setStatus("JUMPING");
+      playJumpSound();
+    }
+  }, [startRun]);
+
+  useEffect(() => {
+    function onKeyDown(event: KeyboardEvent): void {
+      if (event.code === "Space") {
+        event.preventDefault();
+        jump();
+      }
+    }
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [jump]);
+
+  useEffect(() => {
+    function frame(timestamp: number): void {
+      const delta = Math.min(timestamp - lastTimeRef.current, 32) / 16.67;
+      lastTimeRef.current = timestamp;
+
+      if (statusRef.current === "SWIMMING" || statusRef.current === "JUMPING") {
+        velocityRef.current -= GRAVITY * delta;
+        playerYRef.current = Math.max(0, playerYRef.current + velocityRef.current * delta);
+
+        if (playerYRef.current === 0 && velocityRef.current < 0) {
+          velocityRef.current = 0;
+          setStatus("SWIMMING");
+        }
+
+        obstacleXRef.current -= getSpeedValue(simSpeed) * (lowLatencyMode ? 1.08 : 0.92) * delta;
+
+        if (obstacleXRef.current < -90) {
+          resetObstacle();
+          scoreRef.current += 7;
+          setScore(scoreRef.current);
+          playScoreSound();
+        }
+
+        scoreRef.current += 1;
+        setScore(scoreRef.current);
+
+        const shrimpLeft = SHRIMP_X + 8;
+        const shrimpRight = SHRIMP_X + SHRIMP_SIZE - 8;
+        const shrimpBottom = GAME_HEIGHT - 54 - playerYRef.current;
+        const shrimpTop = shrimpBottom - SHRIMP_SIZE + 12;
+        const obstacleLeft = obstacleXRef.current + 8;
+        const obstacleRight = obstacleXRef.current + obstacleWidth - 8;
+        const obstacleTop = GAME_HEIGHT - 48 - obstacleHeight;
+        const obstacleBottom = GAME_HEIGHT - 48;
+        const didCollide =
+          shrimpLeft < obstacleRight &&
+          shrimpRight > obstacleLeft &&
+          shrimpTop < obstacleBottom &&
+          shrimpBottom > obstacleTop;
+
+        if (didCollide) {
+          statusRef.current = "DEAD";
+          setStatus("DEAD");
+          setRotation(180);
+          const nextBest = Math.max(bestScore, scoreRef.current);
+          setBestScore(nextBest);
+          localStorage.setItem("rakta_shrimprun_highscore", String(nextBest));
+        } else {
+          setRotation(playerYRef.current > 0 ? -8 : 0);
+        }
+
+        setPlayerY(playerYRef.current);
+        setObstacleX(obstacleXRef.current);
+      }
+
+      animationRef.current = requestAnimationFrame(frame);
+    }
+
+    animationRef.current = requestAnimationFrame(frame);
+    return () => {
+      if (animationRef.current !== null) cancelAnimationFrame(animationRef.current);
+    };
+  }, [bestScore, lowLatencyMode, obstacleHeight, obstacleWidth, resetObstacle, simSpeed]);
+
+  const obstacleSizeClass =
+    obstacleHeight < 82 ? "KECIL" : obstacleHeight < 120 ? "SEDANG" : "BESAR";
+  const obstaclePos = "BOTTOM" as const;
+
+  return (
+    <div className="rakta-welcome min-h-screen bg-[#050505] text-white">
+      <div className="scanline" />
+      <main className="rakta-shell mx-auto flex w-full max-w-7xl flex-col gap-10 px-6 py-8 md:px-10">
+        <nav className="rakta-nav flex items-center justify-between border-b border-surface-stroke pb-5">
+          <div className="flex items-center gap-3 font-mono text-sm font-extrabold tracking-tight">
+            <span className="grid h-8 w-8 place-items-center border border-brand-pink bg-brand-pink text-black">
+              R
+            </span>
+            Rakta.js
+          </div>
+          <div className="hidden items-center gap-6 font-mono text-[11px] font-bold uppercase tracking-wider text-[#b5b5b5] md:flex">
+            <a href="#features" className="transition hover:text-white">Features</a>
+            <a href="#shrimprun" className="transition hover:text-white">ShrimpRun</a>
+            <a href="#start" className="transition hover:text-white">Start</a>
+          </div>
+        </nav>
+
+        <section className="rakta-hero grid min-h-[540px] items-center gap-10 border-b border-surface-stroke py-12 md:grid-cols-[1.08fr_0.92fr]">
+          <div>
+            <p className="mb-5 font-mono text-[11px] font-bold uppercase tracking-[0.32em] text-brand-pink">
+              THE RED ROUTER FRAMEWORK
+            </p>
+            <h1 className="max-w-4xl text-6xl font-black uppercase leading-[0.88] tracking-normal text-white md:text-8xl">
+              Small in size. Fierce in speed.
+            </h1>
+            <p className="mt-7 max-w-2xl text-sm leading-7 text-[#b5b5b5] md:text-base">
+              Rakta.js is ready. React, Bun, file routes, hot reload, metadata, favicon,
+              and the ShrimpRun starter are already wired for your first route.
+            </p>
+            <div className="rakta-actions mt-8 flex flex-wrap gap-3">
+              <a
+                href="#shrimprun"
+                className="inline-flex h-11 items-center gap-2 border border-brand-pink bg-brand-pink px-5 font-mono text-xs font-extrabold uppercase text-white transition hover:bg-white hover:text-black"
+              >
+                <LuRocket className="h-4 w-4" />
+                Play ShrimpRun
+              </a>
+              <a
+                href="#start"
+                className="inline-flex h-11 items-center gap-2 border border-surface-stroke px-5 font-mono text-xs font-extrabold uppercase text-white transition hover:border-white"
+              >
+                <LuCode className="h-4 w-4" />
+                Start Building
+              </a>
+            </div>
+          </div>
+
+          <div className="rakta-status-grid grid gap-3 border border-surface-stroke bg-surface-card p-5">
+            {statusCards.map(({ title, text, Icon }) => (
+              <div key={title} className="flex gap-4 border border-white/5 bg-black p-4">
+                <Icon className="mt-1 h-5 w-5 text-brand-pink" />
+                <div>
+                  <h2 className="font-mono text-xs font-extrabold uppercase">{title}</h2>
+                  <p className="mt-1 text-xs leading-5 text-[#b5b5b5]">{text}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        <section id="features" className="rakta-feature-grid grid grid-cols-1 gap-0 border border-surface-stroke md:grid-cols-3">
+          {featureCards.map(({ number, title, text, Icon }) => (
+            <div key={title} className="border-b border-surface-stroke p-7 md:border-b-0 md:border-r last:md:border-r-0">
+              <span className="font-mono text-[10px] font-bold text-brand-pink">{number}</span>
+              <Icon className="my-8 h-6 w-6 text-white" />
+              <h2 className="font-mono text-xl font-extrabold uppercase">{title}</h2>
+              <p className="mt-3 text-xs leading-6 text-[#b5b5b5]">{text}</p>
+            </div>
+          ))}
+        </section>
+
+        <section id="shrimprun" className="rakta-game-section grid gap-5">
+          <div>
+            <p className="font-mono text-[10px] font-bold uppercase tracking-[0.28em] text-brand-pink">
+              SHRIMPRUN SIMULATION
+            </p>
+            <h2 className="mt-3 text-4xl font-black uppercase md:text-6xl">
+              Avoid the coral.
+            </h2>
+          </div>
+
+          <button
+            type="button"
+            onClick={jump}
+            className="rakta-game-field relative h-[280px] overflow-hidden border-2 border-surface-stroke bg-black text-left outline-none transition focus-visible:border-brand-pink"
+            aria-label="ShrimpRun game area. Press Space or click to jump."
+          >
+            <div className="bg-grid-glow absolute inset-0 opacity-80" />
+            <div className="absolute inset-x-0 bottom-0 h-12 border-t border-cyan-400/20 bg-cyan-400/5" />
+            <div className="seaweed-waving-left-1 absolute bottom-8 left-9 h-16 w-3 bg-emerald-500/70" />
+            <div className="seaweed-waving-left-2 absolute bottom-8 left-16 h-24 w-3 bg-cyan-500/60" />
+            <div className="seaweed-waving-right-1 absolute bottom-8 right-20 h-20 w-3 bg-emerald-500/70" />
+
+            <div className="absolute left-6 top-5 z-20 flex gap-4 font-mono text-[11px] font-bold uppercase">
+              <span>Score: {score}</span>
+              <span className="text-brand-pink">Best: {bestScore}</span>
+              <span>{status}</span>
+            </div>
+
+            <div
+              className="absolute z-20"
+              style={{ left: SHRIMP_X, bottom: 48 + playerY }}
+            >
+              <ShrimpCharacter status={status} playerY={0} rotation={rotation} />
+            </div>
+
+            <div className="absolute z-10" style={{ left: obstacleX, bottom: 48 }}>
+              <CoralObstacle
+                position={obstaclePos}
+                height={obstacleHeight}
+                width={obstacleWidth}
+                paletteIndex={obstaclePalette}
+                variant={obstacleVariant}
+                scaleX={obstacleScaleX}
+              />
+            </div>
+
+            {status === "IDLE" && (
+              <div className="absolute inset-0 z-30 grid place-items-center bg-black/55 font-mono text-xs font-bold uppercase tracking-[0.2em] text-white">
+                Press Space or click to start
+              </div>
+            )}
+            {status === "DEAD" && (
+              <div className="absolute inset-0 z-30 grid place-items-center bg-black/75 text-center font-mono">
+                <div>
+                  <p className="text-3xl font-black text-brand-pink">SYSTEM IMPACT</p>
+                  <p className="mt-2 text-xs uppercase text-[#b5b5b5]">Click to reboot the run</p>
+                </div>
+              </div>
+            )}
+          </button>
+
+          <div className="rakta-game-controls flex flex-col justify-between gap-4 font-mono text-[10px] text-zinc-500 md:flex-row md:items-center">
+            <div className="flex flex-wrap items-center gap-3">
+              <span className="font-extrabold text-white">SHRIMPRUN {aestheticUnit.replace("-", " ")}</span>
+              <span>CORAL:</span>
+              <span className="border border-brand-pink/30 bg-brand-pink/5 px-2 py-0.5 font-bold text-brand-pink">
+                {obstacleSizeClass}
+              </span>
+            </div>
+
+            <div className="flex flex-wrap items-center gap-3">
+              {(["LENIS-MODERN", "RETRO-CYBER", "NEO-BRUTALIST"] as AestheticUnit[]).map((unit) => (
+                <button
+                  type="button"
+                  key={unit}
+                  onClick={() => {
+                    setAestheticUnit(unit);
+                    showConfigToast(\`STYLE SET: \${unit}\`);
+                    playScoreSound();
+                  }}
+                  className={\`px-2 py-1 font-bold transition \${aestheticUnit === unit ? "bg-white text-black" : "border border-surface-stroke text-zinc-500 hover:text-white"}\`}
+                >
+                  {unit}
+                </button>
+              ))}
+              {(["NORMAL", "FAST", "TURBO"] as const).map((speed) => (
+                <button
+                  type="button"
+                  key={speed}
+                  onClick={() => {
+                    setSimSpeed(speed);
+                    showConfigToast(\`SPEED SET: \${speed}\`);
+                    playScoreSound();
+                  }}
+                  className={\`px-2 py-1 font-bold transition \${simSpeed === speed ? "bg-brand-pink text-white" : "border border-surface-stroke text-zinc-500 hover:text-white"}\`}
+                >
+                  {speed}
+                </button>
+              ))}
+              <button
+                type="button"
+                onClick={() => {
+                  setLowLatencyMode((value) => !value);
+                  showConfigToast(\`LATENCY MODE: \${!lowLatencyMode ? "LOW" : "STANDARD"}\`);
+                  playJumpSound();
+                }}
+                className={\`px-2 py-1 font-bold transition \${lowLatencyMode ? "bg-cyan-400 text-black" : "border border-surface-stroke text-zinc-500"}\`}
+              >
+                LOW LATENCY {lowLatencyMode ? "ON" : "OFF"}
+              </button>
+            </div>
+          </div>
+
+          {configToast && (
+            <div className="fixed bottom-8 left-1/2 z-50 -translate-x-1/2 border border-brand-pink bg-black px-4 py-2 font-mono text-[10px] font-bold uppercase tracking-widest text-brand-pink">
+              {configToast}
+            </div>
+          )}
+        </section>
+
+        <section id="start" className="rakta-start border-t border-surface-stroke py-10">
+          <p className="font-mono text-[10px] font-bold uppercase tracking-[0.28em] text-brand-pink">
+            NEXT MOVE
+          </p>
+          <h2 className="mt-3 text-3xl font-black uppercase md:text-5xl">Edit app/page and ship.</h2>
+          <p className="mt-4 max-w-2xl text-sm leading-7 text-[#b5b5b5]">
+            This starter is intentionally immediate: no popups, no placeholder flow,
+            and no hidden modal dependencies. Your first route is already alive.
+          </p>
+        </section>
+      </main>
+    </div>
+  );
+}
+`;
+
 // src/types.ts
 var CSS_DISPLAY = {
   tailwind: "Tailwind CSS",
@@ -1703,14 +2329,18 @@ var PROJECT_MODE_DISPLAY = {
   fullstack: "Fullstack app (frontend + backend + database)",
   "frontend-only": "Frontend only (no backend, no database)"
 };
+var PROJECT_LANGUAGE_DISPLAY = {
+  typescript: "TypeScript / TSX",
+  javascript: "JavaScript / JSX"
+};
 
 // src/generator.ts
 var DEFAULT_METADATA_TITLE = "Rakta.js | Small in size. Fierce in speed. Alive in every route";
 var FAVICON_BYTES = readFileSync(new URL("../assets/favicon.ico", import.meta.url));
 function getRootFiles(projectConfig) {
-  const { projectName, projectMode } = projectConfig;
+  const { projectName, projectMode, useTypeScript } = projectConfig;
   const workspaces = projectMode === "fullstack" ? ["frontend", "backend", "shared"] : [];
-  return [
+  const files = [
     {
       path: "package.json",
       content: JSON.stringify({
@@ -1725,36 +2355,16 @@ function getRootFiles(projectConfig) {
           "build:backend": "cd backend && bun run build",
           build: "bun run build:frontend && bun run build:backend",
           start: "cd backend && bun run start",
-          typecheck: "cd frontend && bun run typecheck && cd ../backend && bun run typecheck"
+          ...useTypeScript ? {
+            typecheck: "cd frontend && bun run typecheck && cd ../backend && bun run typecheck"
+          } : {}
         } : {
           dev: "rakta dev",
           build: "rakta build",
           start: "rakta start",
-          typecheck: "tsc --noEmit"
-        },
-        description: `${projectName} \u2014 built with Rakta.js`
-      }, null, 2)
-    },
-    {
-      path: "tsconfig.base.json",
-      content: JSON.stringify({
-        compilerOptions: {
-          target: "ESNext",
-          module: "ESNext",
-          moduleResolution: "Bundler",
-          jsx: "react-jsx",
-          lib: ["ESNext", "DOM", "DOM.Iterable"],
-          strict: true,
-          noUncheckedIndexedAccess: true,
-          exactOptionalPropertyTypes: true,
-          skipLibCheck: true,
-          esModuleInterop: true,
-          allowSyntheticDefaultImports: true,
-          resolveJsonModule: true,
-          verbatimModuleSyntax: true,
-          isolatedModules: true
+          ...useTypeScript ? { typecheck: "tsc --noEmit" } : {}
         },
-        exclude: ["node_modules", "dist", "**/dist/**"]
+        description: `${projectName} \xE2\u20AC\u201D built with Rakta.js`
       }, null, 2)
     },
     {
@@ -1799,11 +2409,38 @@ dist/
       content: generateProjectReadme(projectConfig)
     }
   ];
+  if (useTypeScript) {
+    files.splice(1, 0, {
+      path: "tsconfig.base.json",
+      content: JSON.stringify({
+        compilerOptions: {
+          target: "ESNext",
+          module: "ESNext",
+          moduleResolution: "Bundler",
+          jsx: "react-jsx",
+          lib: ["ESNext", "DOM", "DOM.Iterable"],
+          strict: true,
+          noUncheckedIndexedAccess: true,
+          exactOptionalPropertyTypes: true,
+          skipLibCheck: true,
+          esModuleInterop: true,
+          allowSyntheticDefaultImports: true,
+          resolveJsonModule: true,
+          verbatimModuleSyntax: true,
+          isolatedModules: true
+        },
+        exclude: ["node_modules", "dist", "**/dist/**"]
+      }, null, 2)
+    });
+  }
+  return files;
 }
 function getFrontendOnlyFiles(projectConfig) {
-  const { projectName, cssFramework } = projectConfig;
+  const { projectName, cssFramework, useTypeScript } = projectConfig;
   const styleFileName = cssFramework === "sass" ? "globals.scss" : "globals.css";
-  return [
+  const pageExtension = useTypeScript ? "tsx" : "jsx";
+  const scriptExtension = useTypeScript ? "ts" : "js";
+  const files = [
     {
       path: "package.json",
       content: JSON.stringify({
@@ -1816,47 +2453,27 @@ function getFrontendOnlyFiles(projectConfig) {
           build: "rakta build",
           start: "rakta start",
           routes: "rakta routes",
-          typecheck: "tsc --noEmit"
+          ...useTypeScript ? { typecheck: "tsc --noEmit" } : {}
         },
         dependencies: {
-          raktajs: "^0.1.8",
+          raktajs: "^0.2.0",
           react: "^19.2.7",
           "react-dom": "^19.2.7",
+          "react-icons": "^5.7.0",
           ...getCssDependencies(cssFramework)
         },
-        devDependencies: {
+        devDependencies: useTypeScript ? {
           "@types/react": "^19.2.17",
           "@types/react-dom": "^19.2.3",
           typescript: "^6.0.3",
           ...getCssDevDependencies(cssFramework)
+        } : {
+          ...getCssDevDependencies(cssFramework)
         }
       }, null, 2)
     },
     {
-      path: "tsconfig.json",
-      content: JSON.stringify({
-        extends: "./tsconfig.base.json",
-        compilerOptions: {
-          outDir: "./dist",
-          rootDir: "./",
-          types: ["react", "react-dom"]
-        },
-        include: [
-          "rakta-env.d.ts",
-          "app/**/*",
-          "components/**/*",
-          "styles/**/*",
-          "rakta.config.ts"
-        ],
-        exclude: ["node_modules", "dist"]
-      }, null, 2)
-    },
-    {
-      path: "rakta-env.d.ts",
-      content: generateFrontendOnlyRaktaEnv()
-    },
-    {
-      path: "rakta.config.ts",
+      path: `rakta.config.${scriptExtension}`,
       content: `import { defineRaktaConfig } from "raktajs";
 
 export default defineRaktaConfig({
@@ -1873,32 +2490,40 @@ export default defineRaktaConfig({
 `
     },
     {
-      path: "app/layout.tsx",
+      path: `app/layout.${pageExtension}`,
       content: generateFrontendOnlyLayout()
     },
     {
-      path: "app/page.tsx",
+      path: `app/page.${pageExtension}`,
       content: generateFrontendOnlyPage(projectName)
     },
     {
-      path: "app/loading.tsx",
+      path: `app/loading.${pageExtension}`,
       content: generateFrontendOnlyLoading()
     },
     {
-      path: "app/error.tsx",
+      path: `app/error.${pageExtension}`,
       content: generateFrontendOnlyError()
     },
     {
-      path: "app/notFound.tsx",
+      path: `app/notFound.${pageExtension}`,
       content: generateFrontendOnlyNotFound()
     },
     {
-      path: "app/components/raktaShrimpMascot.tsx",
-      content: generateShrimpMascotComponent()
+      path: `app/components/CoralObstacle.${pageExtension}`,
+      content: STARTER_CORAL_OBSTACLE_CODE
+    },
+    {
+      path: `app/components/ShrimpCharacter.${pageExtension}`,
+      content: STARTER_SHRIMP_CHARACTER_CODE
+    },
+    {
+      path: `app/utils/audio.${scriptExtension}`,
+      content: STARTER_AUDIO_CODE
     },
     {
-      path: "app/components/shrimpRunGame.tsx",
-      content: generateShrimpRunGameComponent()
+      path: `app/types.${scriptExtension}`,
+      content: STARTER_TYPES_CODE
     },
     {
       path: `styles/${styleFileName}`,
@@ -1913,6 +2538,31 @@ export default defineRaktaConfig({
       content: FAVICON_BYTES
     }
   ];
+  if (useTypeScript) {
+    files.splice(1, 0, {
+      path: "tsconfig.json",
+      content: JSON.stringify({
+        extends: "./tsconfig.base.json",
+        compilerOptions: {
+          outDir: "./dist",
+          rootDir: "./",
+          types: ["react", "react-dom"]
+        },
+        include: [
+          "rakta-env.d.ts",
+          "app/**/*",
+          "components/**/*",
+          "styles/**/*",
+          "rakta.config.ts"
+        ],
+        exclude: ["node_modules", "dist"]
+      }, null, 2)
+    }, {
+      path: "rakta-env.d.ts",
+      content: generateFrontendOnlyRaktaEnv()
+    });
+  }
+  return processFilesForLanguage(files, useTypeScript);
 }
 function getFullstackFrontendFiles(projectConfig) {
   const { projectName, cssFramework } = projectConfig;
@@ -1934,7 +2584,7 @@ function getFullstackFrontendFiles(projectConfig) {
           typecheck: "tsc --noEmit"
         },
         dependencies: {
-          raktajs: "^0.1.8",
+          raktajs: "^0.2.0",
           react: "^19.2.7",
           "react-dom": "^19.2.7",
           ...getCssDependencies(cssFramework)
@@ -1974,7 +2624,7 @@ export default defineRaktaConfig({
   appName: "${projectName}",
   seo: {
     defaultTitle: "${DEFAULT_METADATA_TITLE}",
-    defaultDescription: "Built with Rakta.js \u2014 Small in size. Fierce in speed. Alive in every route.",
+    defaultDescription: "Built with Rakta.js \xE2\u20AC\u201D Small in size. Fierce in speed. Alive in every route.",
   },
   render: {
     defaultMode: "csr",
@@ -2230,7 +2880,7 @@ export type UserSchema = typeof userSchema;
     },
     {
       path: `frontend/styles/${styleFileName}`,
-      content: getCssGlobals(cssFramework)
+      content: getFrontendOnlyCssGlobals(cssFramework)
     },
     {
       path: "frontend/public/.gitkeep",
@@ -2250,6 +2900,28 @@ export type UserSchema = typeof userSchema;
     }
   ];
 }
+function stripTypeScriptSyntax(code) {
+  return code.replace(/^import\s+type\s+.+;\r?\n/gm, "").replace(/^export\s+interface\s+\w+\s*\{[\s\S]*?\r?\n\}\r?\n/gm, "").replace(/^interface\s+\w+\s*\{[\s\S]*?\r?\n\}\r?\n/gm, "").replace(/^export\s+type\s+\w+\s*=[\s\S]*?;\r?\n/gm, "").replace(/^type\s+\w+\s*=[\s\S]*?;\r?\n/gm, "").replace(/<("[^"]+"|'[^']+'|\w+)(\s*\|\s*("[^"]+"|'[^']+'|\w+))*\s*>/g, "").replace(/\s+as\s+const/g, "").replace(/\s+as\s+[A-Za-z0-9_<>,[\]\s|&".']+/g, "").replace(/\breadonly\s+/g, "").replace(/(\(|,)\s*([A-Za-z_$][\w$]*)\s*:\s*[A-Za-z_$][\w$]*(?:\[\])?(?:\s*\|\s*[A-Za-z_$][\w$]*(?:\[\])?)*/g, "$1 $2").replace(/\)\s*:\s*(?:void|string|number|boolean|Promise<[^>]+>|[A-Za-z_$][\w$]*(?:\[\])?)/g, ")").replace(/\)\s*:\s*[^({=>]+(?=\s*\{)/g, ")").replace(/\}\s*:\s*[A-Za-z_$][\w$]*(?=\s*\))/g, "}").replace(/(const|let)\s+([A-Za-z_$][\w$]*)\s*:\s*[^=;]+=/g, "$1 $2 =");
+}
+function processFilesForLanguage(files, useTypeScript) {
+  if (useTypeScript) {
+    return files;
+  }
+  return files.filter((file) => !file.path.endsWith(".d.ts") && !file.path.endsWith("types.ts") && !file.path.endsWith("types.js")).map((file) => {
+    if (typeof file.content !== "string") {
+      return file;
+    }
+    let path = file.path;
+    if (path.endsWith(".tsx"))
+      path = path.replace(/\.tsx$/, ".jsx");
+    else if (path.endsWith(".ts"))
+      path = path.replace(/\.ts$/, ".js");
+    return {
+      path,
+      content: stripTypeScriptSyntax(file.content)
+    };
+  });
+}
 function getBackendFiles(projectConfig) {
   return [
     ...getBackendCommonFiles(projectConfig),
@@ -2672,430 +3344,238 @@ function getCssDevDependencies(cssFramework) {
   }
 }
 function getFrontendOnlyCssGlobals(cssFramework) {
-  const cssImport = cssFramework === "tailwind" ? `@import "tailwindcss";
+  const cssImport = cssFramework === "tailwind" ? `@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700;800&display=swap");
+@import "tailwindcss";
 
 ` : cssFramework === "bootstrap" ? `@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");
 
-` : cssFramework === "sass" ? `$color-primary: #dc2626;
+` : cssFramework === "sass" ? `$color-primary: #e11d48;
 $color-background: #050505;
-$color-foreground: #f8fafc;
+$color-foreground: #fafafa;
 
 ` : "";
-  return `${cssImport}:root {
-  --color-primary: #dc2626;
-  --color-background: #050505;
-  --color-foreground: #f8fafc;
-  --color-surface: #0e111a;
-  --color-border: rgba(255, 255, 255, 0.1);
-  --color-muted: #94a3b8;
-  color-scheme: dark;
+  return `${cssImport}@theme {
+  --font-sans: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+  --color-brand-pink: #e11d48;
+  --color-brand-green: #00ff00;
+  --color-surface-bg: #000000;
+  --color-surface-card: #0d0d0d;
+  --color-surface-stroke: #1f1f1f;
 }
 
-html {
-  scroll-behavior: smooth;
+:root {
+  color-scheme: dark;
+  background: #050505;
+  color: #fafafa;
+  font-family: var(--font-sans);
 }
 
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
 body {
   margin: 0;
   min-width: 320px;
   min-height: 100vh;
-  color: var(--color-foreground);
-  background: var(--color-background);
-  font-family:
-    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, sans-serif;
+  background: #050505;
+  color: #fafafa;
+  overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
 }
+button, a { font: inherit; }
+a { color: inherit; text-decoration: none; }
+#rakta-root { min-height: 100vh; }
 
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-@keyframes shrimpLegs {
-  0% {
-    transform: translateY(0);
-  }
-
-  50% {
-    transform: translateY(2px);
-  }
-}
-
-#rakta-root {
+.rakta-welcome {
   min-height: 100vh;
+  background: #050505;
+  color: #fafafa;
 }
-
-main {
-  width: min(1120px, calc(100% - 32px));
-  min-height: 100vh;
+.rakta-shell {
+  width: min(100% - 32px, 1280px);
   margin: 0 auto;
-  padding: 56px 0;
-}
-
-section {
-  margin: 0 0 24px;
-  border: 1px solid rgba(248, 113, 113, 0.18);
-  border-radius: 18px;
-  background:
-    linear-gradient(135deg, rgba(220, 38, 38, 0.16), transparent 34%),
-    #0e111a;
-  box-shadow: 0 24px 80px rgba(127, 29, 29, 0.2);
-  padding: clamp(24px, 4vw, 44px);
+  padding: 32px 0;
 }
-
-p {
-  margin: 0 0 12px;
-  color: #cbd5e1;
-  line-height: 1.7;
-}
-
-h1,
-h2 {
-  margin: 0 0 12px;
-  color: #ffffff;
-  line-height: 1;
+.rakta-nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #1f1f1f;
+  padding-bottom: 20px;
+}
+.rakta-hero {
+  display: grid;
+  min-height: 540px;
+  grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
+  align-items: center;
+  gap: 40px;
+  border-bottom: 1px solid #1f1f1f;
+  padding: 48px 0;
 }
-
-h1 {
-  max-width: 760px;
-  font-size: clamp(42px, 8vw, 84px);
+.rakta-hero h1 {
+  max-width: 900px;
+  margin: 0;
+  color: #fff;
+  font-size: clamp(3.5rem, 8vw, 6rem);
+  font-weight: 900;
+  line-height: 0.88;
   letter-spacing: 0;
+  text-transform: uppercase;
 }
-
-h2 {
-  font-size: clamp(28px, 4vw, 44px);
+.rakta-hero p,
+.rakta-start p {
+  color: #b5b5b5;
 }
-
-click {
+.rakta-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 32px;
+}
+.rakta-actions a {
   display: inline-flex;
+  height: 44px;
   align-items: center;
-  justify-content: center;
-  min-height: 42px;
-  margin: 16px 12px 0 0;
-  border: 1px solid rgba(248, 113, 113, 0.42);
-  border-radius: 12px;
-  padding: 0 16px;
-  color: #fecaca;
-  font-weight: 700;
-  text-decoration: none;
-  cursor: pointer;
-  transition:
-    transform 160ms ease,
-    border-color 160ms ease,
-    background 160ms ease;
+  gap: 8px;
+  border: 1px solid #e11d48;
+  padding: 0 20px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 800;
+  text-transform: uppercase;
 }
-
-click:hover {
-  border-color: #f87171;
-  background: rgba(220, 38, 38, 0.12);
-  transform: translateY(-1px);
+.rakta-actions a:first-child {
+  background: #e11d48;
+  color: #fff;
 }
-
-button {
-  font: inherit;
+.rakta-status-grid,
+.rakta-feature-grid {
+  display: grid;
+  gap: 12px;
+  border: 1px solid #1f1f1f;
+  background: #0d0d0d;
+  padding: 20px;
+}
+.rakta-status-grid > div,
+.rakta-feature-grid > div {
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: #000;
+  padding: 16px;
+}
+.rakta-feature-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0;
+  padding: 0;
+}
+.rakta-feature-grid > div {
+  min-height: 220px;
+  border-color: #1f1f1f;
+  padding: 28px;
+}
+.rakta-game-section {
+  display: grid;
+  gap: 20px;
+}
+.rakta-game-section h2,
+.rakta-start h2 {
+  margin: 12px 0 0;
+  font-size: clamp(2.25rem, 6vw, 4rem);
+  font-weight: 900;
+  line-height: 0.95;
+  text-transform: uppercase;
 }
-
-.relative {
+.rakta-game-field {
   position: relative;
-}
-
-.absolute {
-  position: absolute;
-}
-
-.inset-0 {
-  inset: 0;
-}
-
-.bottom-0 {
-  bottom: 0;
-}
-
-.left-0 {
-  left: 0;
-}
-
-.top-2 {
-  top: 8px;
-}
-
-.right-3 {
-  right: 12px;
-}
-
-.block {
   display: block;
+  width: 100%;
+  height: 280px;
+  overflow: hidden;
+  border: 2px solid #1f1f1f;
+  background: #000;
+  color: inherit;
+  cursor: pointer;
 }
-
-.flex {
+.rakta-game-controls {
   display: flex;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.flex-wrap {
   flex-wrap: wrap;
-}
-
-.items-center {
   align-items: center;
-}
-
-.items-start {
-  align-items: flex-start;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.gap-2 {
-  gap: 8px;
-}
-
-.gap-4 {
+  justify-content: space-between;
   gap: 16px;
-}
-
-.gap-8 {
-  gap: 32px;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.max-w-full {
-  max-width: 100%;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-.select-none {
-  user-select: none;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.text-left {
-  text-align: left;
-}
-
-.text-sm {
-  font-size: 14px;
-}
-
-.text-lg {
-  font-size: 18px;
-}
-
-.text-xl {
-  font-size: 20px;
-}
-
-.font-bold {
-  font-weight: 800;
-}
-
-.font-semibold {
-  font-weight: 700;
-}
-
-.font-mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-}
-
-.text-white {
-  color: #fff;
-}
-
-.text-slate-400 {
-  color: #94a3b8;
-}
-
-.text-red-600 {
-  color: #dc2626;
-}
-
-.bg-red-600 {
-  background: #dc2626;
-}
-
-.bg-black\\/75 {
-  background: rgba(0, 0, 0, 0.75);
-}
-
-.pointer-events-none {
-  pointer-events: none;
-}
-
-.rounded-sm {
-  border-radius: 2px;
-}
-
-.rounded-lg {
-  border-radius: 8px;
-}
-
-.min-h-5 {
-  min-height: 20px;
-}
-
-.tabular-nums {
-  font-variant-numeric: tabular-nums;
-}
-
-button[aria-label^="ShrimpRun"] {
-  border: 2px solid rgba(248, 113, 113, 0.28);
-  border-radius: 16px;
-  background:
-    linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(7, 10, 18, 0.98)),
-    radial-gradient(circle at 18% 22%, rgba(248, 113, 113, 0.16), transparent 30%);
-  box-shadow:
-    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
-    0 20px 60px rgba(0, 0, 0, 0.28);
-}
-
-button[aria-label^="ShrimpRun"] > .bottom-0.left-0 {
-  background: linear-gradient(90deg, #7f1d1d, #dc2626, #fecaca);
-}
-
-button:not([aria-label]) {
-  border: 0;
-  border-radius: 10px;
-  background: #dc2626;
-  color: #fff;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: #71717a;
+}
+.rakta-game-controls button {
+  border: 1px solid #1f1f1f;
+  padding: 4px 8px;
+  color: #a1a1aa;
   cursor: pointer;
-  font-weight: 800;
-}
-
-.shrimp-sprite {
-  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.32));
 }
-
-.shrimp-run-obstacle {
-  border-radius: 8px 8px 2px 2px;
-  background:
-    radial-gradient(circle at 50% 8px, #fecaca 0 4px, transparent 5px),
-    linear-gradient(135deg, #fb7185 0%, #dc2626 46%, #7f1d1d 100%);
-  box-shadow:
-    inset -6px -8px 0 rgba(69, 10, 10, 0.32),
-    0 0 0 2px rgba(254, 202, 202, 0.18);
-}
-
-.shrimp-run-obstacle::before,
-.shrimp-run-obstacle::after {
-  position: absolute;
-  bottom: 8px;
-  width: 10px;
-  height: 22px;
-  border-radius: 999px 999px 4px 4px;
-  background: #ef4444;
-  content: "";
+.rakta-start {
+  border-top: 1px solid #1f1f1f;
+  padding: 40px 0;
 }
 
-.shrimp-run-obstacle::before {
-  left: -7px;
-  transform: rotate(-18deg);
-}
-
-.shrimp-run-obstacle::after {
-  right: -7px;
-  transform: rotate(18deg);
-}
-
-@media (max-width: 720px) {
-  main {
-    width: min(100% - 20px, 1120px);
-    padding: 24px 0;
+@media (max-width: 768px) {
+  .rakta-hero,
+  .rakta-feature-grid {
+    grid-template-columns: 1fr;
   }
-
-  section {
-    padding: 20px;
+  .rakta-nav > div:last-child {
+    display: none;
   }
 }
-`;
-}
-function getCssGlobals(cssFramework) {
-  const sharedBase = `
-:root {
-  --color-primary: #dc2626;
-  --color-background: #050505;
-  --color-foreground: #f8fafc;
-}
 
-* {
-  box-sizing: border-box;
-}
+::-webkit-scrollbar { width: 6px; height: 6px; }
+::-webkit-scrollbar-track { background: #000000; }
+::-webkit-scrollbar-thumb { background: #e11d48; border-radius: 0; }
+::-webkit-scrollbar-thumb:hover { background: #be123c; }
 
-body {
-  margin: 0;
-  color: var(--color-foreground);
-  background: var(--color-background);
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+@keyframes scanline {
+  0% { transform: translateY(-100%); }
+  100% { transform: translateY(100vh); }
 }
-
-.page-shell {
-  width: min(100% - 2rem, 960px);
-  margin: 0 auto;
-  padding: 4rem 0;
+.scanline {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  height: 120px;
+  pointer-events: none;
+  background: linear-gradient(0deg, rgba(225, 29, 72, 0.08) 0%, rgba(225, 29, 72, 0) 100%);
+  opacity: 0.8;
+  animation: scanline 8s linear infinite;
 }
 
-.hero-card,
-.feature-card {
-  border: 1px solid rgba(255, 255, 255, 0.1);
-  background: #0e111a;
-  border-radius: 24px;
-  padding: 2rem;
-  margin-bottom: 1.5rem;
+.bg-grid-glow {
+  background-size: 40px 40px;
+  background-image:
+    linear-gradient(to right, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
 }
 
-.eyebrow {
-  color: #dc2626;
-  font-weight: 700;
-  letter-spacing: 0.12em;
-  font-size: 0.75rem;
-  text-transform: uppercase;
+@keyframes seaweed-wave-1 {
+  0% { transform: skewX(-14deg) rotate(-8deg) scaleY(0.96); }
+  50% { transform: skewX(0deg) rotate(0deg) scaleY(1.04); }
+  100% { transform: skewX(14deg) rotate(8deg) scaleY(0.96); }
 }
-
-.button-row {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-  margin-top: 1rem;
+@keyframes seaweed-wave-2 {
+  0% { transform: skewX(10deg) rotate(6deg) scaleY(1.04); }
+  50% { transform: skewX(-2deg) rotate(-2deg) scaleY(0.96); }
+  100% { transform: skewX(-10deg) rotate(-6deg) scaleY(1.04); }
 }
-
-a {
-  color: #dc2626;
+.seaweed-waving-left-1,
+.seaweed-waving-right-1 {
+  transform-origin: bottom center !important;
+  animation: seaweed-wave-1 3.2s infinite ease-in-out alternate !important;
 }
-
-button {
-  cursor: pointer;
+.seaweed-waving-left-2,
+.seaweed-waving-right-2 {
+  transform-origin: bottom center !important;
+  animation: seaweed-wave-2 3.8s infinite ease-in-out alternate !important;
 }
 `;
-  switch (cssFramework) {
-    case "tailwind":
-      return `@import "tailwindcss";
-${sharedBase}`;
-    case "bootstrap":
-      return `@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css");
-${sharedBase}`;
-    case "sass":
-      return `$color-primary: #dc2626;
-$color-background: #050505;
-$color-foreground: #f8fafc;
-${sharedBase}`;
-    case "none":
-      return sharedBase;
-  }
 }
 function generateFrontendOnlyRaktaEnv() {
   return `declare module "*.css";
@@ -3115,14 +3595,6 @@ declare global {
       click: RaktaClickAttributes;
     }
   }
-
-  const useCallback: typeof import("react").useCallback;
-  const useEffect: typeof import("react").useEffect;
-  const useRef: typeof import("react").useRef;
-  const useState: typeof import("react").useState;
-
-  const ShrimpRunGame: typeof import("./app/components/shrimpRunGame").default;
-  const RaktaShrimpMascot: typeof import("./app/components/raktaShrimpMascot").default;
 }
 
 declare module "react/jsx-runtime" {
@@ -3165,54 +3637,8 @@ export default function RootLayout({ children }: RootLayoutProps) {
 }
 `;
 }
-function generateFrontendOnlyPage(projectName) {
-  return `import ShrimpRunGame from "./components/shrimpRunGame";
-
-export default function HomePage() {
-  return (
-    <main className="mx-auto flex min-h-screen w-full max-w-4xl flex-col gap-6 px-4 py-16 sm:px-6 lg:px-8">
-      <section className="rounded-3xl border border-white/10 bg-[#0e111a] p-8 shadow-2xl shadow-red-950/20">
-        <p className="mb-2 text-xs font-bold uppercase tracking-[0.3em] text-red-600">
-          THE RED ROUTER FRAMEWORK
-        </p>
-        <h1 className="mb-3 text-4xl font-extrabold leading-tight text-white md:text-6xl">
-          Welcome to ${projectName}
-        </h1>
-        <p className="max-w-2xl text-base leading-7 text-slate-400">
-          Built with Rakta.js \u2014 Small in size. Fierce in speed. Alive in every route.
-        </p>
-
-        <div className="mt-6 flex flex-wrap gap-3">
-          <click
-            to="/offline"
-            className="rounded-xl border border-red-500/40 px-4 py-2 text-sm font-semibold text-red-400 transition hover:border-red-400 hover:text-red-300"
-          >
-            Open offline page
-          </click>
-          <click
-            to="/dashboard"
-            className="rounded-xl bg-red-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-700"
-          >
-            View dashboard
-          </click>
-        </div>
-      </section>
-
-      <section className="rounded-3xl border border-white/10 bg-[#0e111a] p-8 shadow-2xl shadow-red-950/20">
-        <p className="mb-2 text-xs font-bold uppercase tracking-[0.3em] text-red-600">
-          SHRIMPRUN
-        </p>
-        <h2 className="mb-1 text-2xl font-bold text-white">Play ShrimpRun</h2>
-        <p className="mb-6 text-sm leading-6 text-slate-400">
-          Press Space or click the game area to jump. Avoid the red obstacles!
-        </p>
-
-        <ShrimpRunGame />
-      </section>
-    </main>
-  );
-}
-`;
+function generateFrontendOnlyPage(_projectName) {
+  return STARTER_PAGE_CODE;
 }
 function generateFrontendOnlyLoading() {
   return `export default function Loading() {
@@ -3282,564 +3708,6 @@ function generateFrontendOnlyNotFound() {
 }
 `;
 }
-function generateShrimpMascotComponent() {
-  return `interface RaktaShrimpMascotProps {
-  readonly isJumping: boolean;
-  readonly isDead: boolean;
-  readonly style?: import("react").CSSProperties;
-}
-
-/**
- * RaktaShrimpMascot \u2014 The animated shrimp hero of ShrimpRun.
- * Drawn entirely with inline SVG. No external assets required.
- */
-export default function RaktaShrimpMascot({
-  isJumping,
-  isDead,
-  style,
-}: RaktaShrimpMascotProps) {
-  const bodyColor = isDead ? "#6b7280" : "#dc2626";
-  const eyeColor = isDead ? "#374151" : "#fff";
-  const legAnimation =
-    isJumping || isDead ? "none" : "shrimpLegs 0.3s steps(2) infinite";
-
-  return (
-    <svg
-      viewBox="0 0 48 48"
-      width="48"
-      height="48"
-      style={{ display: "block", ...style }}
-      aria-label={
-        isDead ? "dead shrimp" : isJumping ? "shrimp jumping" : "running shrimp"
-      }
-      role="img"
-    >
-      <style>{\`
-        @keyframes shrimpLegs {
-          0%  { transform: translateY(0); }
-          50% { transform: translateY(2px); }
-        }
-      \`}</style>
-
-      {/* Body */}
-      <path
-        d="M8 30 Q10 14 24 12 Q38 10 40 22 Q42 32 32 36 Q20 40 8 30Z"
-        fill={bodyColor}
-      />
-
-      {/* Shell segments */}
-      <path
-        d="M12 28 Q16 20 24 18 Q30 17 34 22"
-        stroke="#b91c1c"
-        strokeWidth="1.5"
-        fill="none"
-        opacity={isDead ? 0.3 : 0.6}
-      />
-      <path
-        d="M14 32 Q19 24 28 22 Q33 21 36 26"
-        stroke="#b91c1c"
-        strokeWidth="1.5"
-        fill="none"
-        opacity={isDead ? 0.3 : 0.6}
-      />
-
-      {/* Eye */}
-      <circle cx="34" cy="18" r="4" fill="#1e293b" />
-      <circle cx="35" cy="17" r="2" fill={eyeColor} />
-
-      {isDead && (
-        <>
-          <line
-            x1="32"
-            y1="16"
-            x2="36"
-            y2="20"
-            stroke="#374151"
-            strokeWidth="1.5"
-          />
-          <line
-            x1="36"
-            y1="16"
-            x2="32"
-            y2="20"
-            stroke="#374151"
-            strokeWidth="1.5"
-          />
-        </>
-      )}
-
-      {/* Antennae */}
-      <line
-        x1="34"
-        y1="14"
-        x2="40"
-        y2="6"
-        stroke={bodyColor}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-      <line
-        x1="32"
-        y1="13"
-        x2="36"
-        y2="4"
-        stroke={bodyColor}
-        strokeWidth="1.5"
-        strokeLinecap="round"
-      />
-
-      {/* Tail */}
-      <path
-        d="M10 30 Q4 26 6 20"
-        stroke={bodyColor}
-        strokeWidth="2"
-        fill="none"
-        strokeLinecap="round"
-      />
-      <path
-        d="M10 30 Q2 30 4 36"
-        stroke={bodyColor}
-        strokeWidth="2"
-        fill="none"
-        strokeLinecap="round"
-      />
-      <path
-        d="M10 30 Q6 34 8 40"
-        stroke={bodyColor}
-        strokeWidth="2"
-        fill="none"
-        strokeLinecap="round"
-      />
-
-      {/* Legs */}
-      <g
-        style={{
-          animation: legAnimation,
-          transformOrigin: "24px 36px",
-        }}
-      >
-        <line
-          x1="18"
-          y1="36"
-          x2="14"
-          y2="44"
-          stroke={bodyColor}
-          strokeWidth="1.5"
-          strokeLinecap="round"
-        />
-        <line
-          x1="22"
-          y1="38"
-          x2="18"
-          y2="46"
-          stroke={bodyColor}
-          strokeWidth="1.5"
-          strokeLinecap="round"
-        />
-        <line
-          x1="26"
-          y1="38"
-          x2="24"
-          y2="46"
-          stroke={bodyColor}
-          strokeWidth="1.5"
-          strokeLinecap="round"
-        />
-        <line
-          x1="30"
-          y1="37"
-          x2="28"
-          y2="45"
-          stroke={bodyColor}
-          strokeWidth="1.5"
-          strokeLinecap="round"
-        />
-      </g>
-    </svg>
-  );
-}
-`;
-}
-function generateShrimpRunGameComponent() {
-  return `import { useCallback, useEffect, useRef, useState } from "react";
-import RaktaShrimpMascot from "./raktaShrimpMascot";
-// \u2500\u2500\u2500 Types \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-
-type GameStatus = "idle" | "running" | "dead";
-
-interface ObstacleState {
-  readonly id: number;
-  readonly xPosition: number;
-  readonly width: number;
-  readonly height: number;
-}
-
-interface ShrimpState {
-  readonly yPosition: number;
-  readonly velocityY: number;
-  readonly isJumping: boolean;
-}
-
-// \u2500\u2500\u2500 Constants \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-
-const CANVAS_WIDTH = 640;
-const CANVAS_HEIGHT = 160;
-const GROUND_STRIP_HEIGHT = 4;
-const SHRIMP_START_X = 60;
-const SHRIMP_WIDTH = 48;
-const SHRIMP_HEIGHT = 48;
-const GRAVITY = 1.4;
-const JUMP_VELOCITY = -18;
-const INITIAL_OBSTACLE_SPEED = 5;
-const SPEED_INCREMENT_PER_SCORE = 0.003;
-const OBSTACLE_SPAWN_INTERVAL_MS = 1600;
-const SCORE_TICK_MS = 80;
-const COLLISION_MARGIN = 8;
-const MAX_CONCURRENT_OBSTACLES = 3;
-const FRAME_SKIP_THRESHOLD_MS = 100;
-
-// \u2500\u2500\u2500 Physics helpers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-
-function getObstacleSpeed(currentScore: number): number {
-  return INITIAL_OBSTACLE_SPEED + currentScore * SPEED_INCREMENT_PER_SCORE;
-}
-
-function checkCollision(
-  shrimpYPosition: number,
-  obstacle: ObstacleState,
-): boolean {
-  const shrimpLeft = SHRIMP_START_X + COLLISION_MARGIN;
-  const shrimpRight = SHRIMP_START_X + SHRIMP_WIDTH - COLLISION_MARGIN;
-  const shrimpTop =
-    CANVAS_HEIGHT -
-    GROUND_STRIP_HEIGHT -
-    shrimpYPosition -
-    SHRIMP_HEIGHT +
-    COLLISION_MARGIN;
-  const shrimpBottom = CANVAS_HEIGHT - GROUND_STRIP_HEIGHT - shrimpYPosition;
-
-  const obstacleLeft = obstacle.xPosition + COLLISION_MARGIN;
-  const obstacleRight = obstacle.xPosition + obstacle.width - COLLISION_MARGIN;
-  const obstacleTop = CANVAS_HEIGHT - GROUND_STRIP_HEIGHT - obstacle.height;
-  const obstacleBottom = CANVAS_HEIGHT - GROUND_STRIP_HEIGHT;
-
-  return (
-    shrimpLeft < obstacleRight &&
-    shrimpRight > obstacleLeft &&
-    shrimpTop < obstacleBottom &&
-    shrimpBottom > obstacleTop
-  );
-}
-
-// \u2500\u2500\u2500 Component \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
-
-/**
- * ShrimpRun \u2014 Default Rakta.js interactive starter game.
- *
- * Like the Chrome offline Dino game, but the dinosaur is an animated shrimp.
- * Press Space or click the game canvas to jump. Avoid the red obstacles!
- *
- * Features:
- * - React state only \u2014 no external game library
- * - requestAnimationFrame game loop
- * - Physics: gravity + jump velocity
- * - Score that increases over time
- * - Speed ramps up as score grows
- * - Collision detection with margin
- * - High score tracked in component state
- * - Keyboard (Space) and click/tap support
- * - Accessible button game canvas
- * - SVG shrimp mascot \u2014 no external assets
- */
-export default function ShrimpRunGame() {
-  const [gameStatus, setGameStatus] = useState<GameStatus>("idle");
-  const [score, setScore] = useState(0);
-  const [highScore, setHighScore] = useState(0);
-  const [obstacles, setObstacles] = useState<ObstacleState[]>([]);
-  const [shrimp, setShrimp] = useState<ShrimpState>({
-    yPosition: 0,
-    velocityY: 0,
-    isJumping: false,
-  });
-
-  const gameStatusRef = useRef<GameStatus>("idle");
-  const scoreRef = useRef(0);
-  const shrimpRef = useRef<ShrimpState>({
-    yPosition: 0,
-    velocityY: 0,
-    isJumping: false,
-  });
-  const obstaclesRef = useRef<ObstacleState[]>([]);
-  const obstacleIdRef = useRef(0);
-  const animationFrameRef = useRef<number>(0);
-  const lastObstacleTimeRef = useRef(0);
-  const lastScoreTickRef = useRef(0);
-
-  const jump = useCallback((): void => {
-    if (gameStatusRef.current === "dead") {
-      return;
-    }
-
-    if (gameStatusRef.current === "idle") {
-      gameStatusRef.current = "running";
-      setGameStatus("running");
-    }
-
-    if (!shrimpRef.current.isJumping) {
-      const nextShrimp: ShrimpState = {
-        ...shrimpRef.current,
-        velocityY: JUMP_VELOCITY,
-        isJumping: true,
-      };
-
-      shrimpRef.current = nextShrimp;
-      setShrimp(nextShrimp);
-    }
-  }, []);
-
-  const resetGame = useCallback((): void => {
-    const freshShrimp: ShrimpState = {
-      yPosition: 0,
-      velocityY: 0,
-      isJumping: false,
-    };
-
-    shrimpRef.current = freshShrimp;
-    obstaclesRef.current = [];
-    obstacleIdRef.current = 0;
-    scoreRef.current = 0;
-    gameStatusRef.current = "idle";
-    lastObstacleTimeRef.current = 0;
-    lastScoreTickRef.current = 0;
-
-    setShrimp(freshShrimp);
-    setObstacles([]);
-    setScore(0);
-    setGameStatus("idle");
-  }, []);
-
-  useEffect(() => {
-    let previousTimestamp = 0;
-
-    function gameTick(timestamp: number): void {
-      if (gameStatusRef.current !== "running") {
-        animationFrameRef.current = requestAnimationFrame(gameTick);
-        return;
-      }
-
-      const deltaTime = timestamp - previousTimestamp;
-      previousTimestamp = timestamp;
-
-      if (deltaTime > FRAME_SKIP_THRESHOLD_MS) {
-        animationFrameRef.current = requestAnimationFrame(gameTick);
-        return;
-      }
-
-      const currentShrimp = shrimpRef.current;
-      let nextVelocityY = currentShrimp.velocityY + GRAVITY;
-      let nextYPosition = currentShrimp.yPosition - nextVelocityY;
-
-      if (nextYPosition <= 0) {
-        nextYPosition = 0;
-        nextVelocityY = 0;
-      }
-
-      const nextShrimp: ShrimpState = {
-        yPosition: nextYPosition,
-        velocityY: nextVelocityY,
-        isJumping: nextYPosition > 0,
-      };
-
-      shrimpRef.current = nextShrimp;
-      setShrimp(nextShrimp);
-
-      const obstacleSpeed = getObstacleSpeed(scoreRef.current);
-
-      const movedObstacles = obstaclesRef.current
-        .map(
-          (obstacle): ObstacleState => ({
-            ...obstacle,
-            xPosition: obstacle.xPosition - obstacleSpeed,
-          }),
-        )
-        .filter((obstacle) => obstacle.xPosition + obstacle.width > -10);
-
-      if (
-        timestamp - lastObstacleTimeRef.current > OBSTACLE_SPAWN_INTERVAL_MS &&
-        movedObstacles.length < MAX_CONCURRENT_OBSTACLES
-      ) {
-        const obstacleHeight = 30 + Math.floor(Math.random() * 30);
-        const obstacleWidth = 20 + Math.floor(Math.random() * 20);
-
-        movedObstacles.push({
-          id: obstacleIdRef.current,
-          xPosition: CANVAS_WIDTH + 20,
-          width: obstacleWidth,
-          height: obstacleHeight,
-        });
-
-        obstacleIdRef.current += 1;
-        lastObstacleTimeRef.current = timestamp;
-      }
-
-      obstaclesRef.current = movedObstacles;
-      setObstacles([...movedObstacles]);
-
-      for (const obstacle of movedObstacles) {
-        if (checkCollision(nextShrimp.yPosition, obstacle)) {
-          gameStatusRef.current = "dead";
-          setGameStatus("dead");
-          setHighScore((previousHighScore: number) =>
-            Math.max(previousHighScore, scoreRef.current),
-          );
-          animationFrameRef.current = requestAnimationFrame(gameTick);
-          return;
-        }
-      }
-
-      if (timestamp - lastScoreTickRef.current > SCORE_TICK_MS) {
-        scoreRef.current += 1;
-        setScore(scoreRef.current);
-        lastScoreTickRef.current = timestamp;
-      }
-
-      animationFrameRef.current = requestAnimationFrame(gameTick);
-    }
-
-    animationFrameRef.current = requestAnimationFrame(gameTick);
-
-    return () => {
-      cancelAnimationFrame(animationFrameRef.current);
-    };
-  }, []);
-
-  useEffect(() => {
-    function handleKeyDown(keyboardEvent: KeyboardEvent): void {
-      if (keyboardEvent.code === "Space") {
-        keyboardEvent.preventDefault();
-        jump();
-      }
-    }
-
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [jump]);
-
-  const shrimpBottomOffset = GROUND_STRIP_HEIGHT + shrimp.yPosition;
-  const isDead = gameStatus === "dead";
-  const isIdle = gameStatus === "idle";
-  const isRunning = gameStatus === "running";
-
-  return (
-    <div className="flex flex-col items-start gap-4 py-4">
-      <div className="flex flex-wrap items-center gap-8">
-        <span className="font-mono text-xl font-bold tabular-nums text-red-600">
-          Score: {score}
-        </span>
-        {highScore > 0 && (
-          <span className="text-sm text-slate-400">Best: {highScore}</span>
-        )}
-      </div>
-
-      <button
-        type="button"
-        className="relative block max-w-full cursor-pointer select-none overflow-hidden rounded-2xl border-2 border-red-600/30 bg-[#0e111a] p-0 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
-        aria-label="ShrimpRun game area. Click or press Space to jump."
-        onClick={jump}
-        onKeyDown={(keyboardEvent: import("react").KeyboardEvent) => {
-          if (keyboardEvent.code === "Space") {
-            keyboardEvent.preventDefault();
-            jump();
-          }
-        }}
-        style={{
-          width: CANVAS_WIDTH,
-          height: CANVAS_HEIGHT,
-        }}
-      >
-        <span
-          className="absolute bottom-0 left-0 w-full rounded-sm bg-red-600"
-          style={{
-            height: GROUND_STRIP_HEIGHT,
-          }}
-        />
-
-        <span
-          className="absolute shrimp-sprite"
-          style={{
-            left: SHRIMP_START_X,
-            bottom: shrimpBottomOffset,
-            width: SHRIMP_WIDTH,
-            height: SHRIMP_HEIGHT,
-            transform: isDead
-              ? "rotate(18deg) translateY(8px)"
-              : shrimp.isJumping
-                ? "rotate(-8deg) translateY(-4px)"
-                : "rotate(0deg)",
-            transition: "transform 120ms ease",
-          }}
-        >
-          <RaktaShrimpMascot isJumping={shrimp.isJumping} isDead={isDead} />
-        </span>
-
-        {obstacles.map((obstacle) => (
-          <span
-            key={obstacle.id}
-            className="absolute shrimp-run-obstacle"
-            style={{
-              left: obstacle.xPosition,
-              bottom: GROUND_STRIP_HEIGHT,
-              width: obstacle.width,
-              height: obstacle.height,
-            }}
-          />
-        ))}
-
-        {isIdle && (
-          <span className="pointer-events-none absolute inset-0 flex items-center justify-center text-sm text-slate-400">
-            Press Space or click to start
-          </span>
-        )}
-
-        {isDead && (
-          <span className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-black/75">
-            <span className="text-lg font-bold tracking-widest text-red-600">
-              GAME OVER
-            </span>
-            <span className="text-sm text-slate-400">Score: {score}</span>
-          </span>
-        )}
-
-        {isRunning && score > 0 && score % 50 === 0 && (
-          <span className="absolute right-3 top-2 text-xs font-bold tracking-widest text-red-600 opacity-80">
-            {score}!
-          </span>
-        )}
-      </button>
-
-      <p className="min-h-5 text-sm text-slate-400">
-        {isIdle && "\uD83E\uDD90 Click or press Space to make the shrimp jump!"}
-        {isRunning && "\uD83E\uDD90 Don't hit the obstacles!"}
-        {isDead && "The shrimp got cooked. Try again!"}
-      </p>
-
-      {isDead && (
-        <button
-          type="button"
-          className="w-fit rounded-lg bg-red-600 px-6 py-2 font-semibold text-white transition hover:bg-red-700 active:bg-red-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500"
-          onClick={resetGame}
-        >
-          Restart
-        </button>
-      )}
-    </div>
-  );
-}
-`;
-}
 function generateFullstackHomePage(projectName) {
   return `import React from "react";
 
@@ -3850,7 +3718,7 @@ export default function HomePage() {
         <p className="eyebrow">THE RED ROUTER FRAMEWORK</p>
         <h1>Welcome to ${projectName}</h1>
         <p>
-          Built with Rakta.js \u2014 Small in size. Fierce in speed. Alive in every route.
+          Built with Rakta.js \xE2\u20AC\u201D Small in size. Fierce in speed. Alive in every route.
         </p>
         <div className="button-row">
           <a href="/about">About</a>
@@ -4061,7 +3929,7 @@ function generateProjectReadme(projectConfig) {
   if (projectMode === "frontend-only") {
     return `# ${projectName}
 
-Built with Rakta.js \u2014 Small in size. Fierce in speed. Alive in every route.
+Built with Rakta.js \xE2\u20AC\u201D Small in size. Fierce in speed. Alive in every route.
 
 ## Stack
 
@@ -4080,12 +3948,12 @@ bun run dev
 
 ## ShrimpRun
 
-Your starter includes ShrimpRun \u2014 an interactive game where a shrimp dodges obstacles. Press Space or click to jump!
+Your starter includes ShrimpRun \xE2\u20AC\u201D an interactive game where a shrimp dodges obstacles. Press Space or click to jump!
 `;
   }
   return `# ${projectName}
 
-Built with Rakta.js \u2014 Small in size. Fierce in speed. Alive in every route.
+Built with Rakta.js \xE2\u20AC\u201D Small in size. Fierce in speed. Alive in every route.
 
 ## Stack
 
@@ -4200,6 +4068,24 @@ async function promptCssFramework() {
   });
   return getPromptValue(promptResult);
 }
+async function promptProjectLanguage() {
+  const promptResult = await select({
+    message: "Choose a language:",
+    options: [
+      {
+        value: "typescript",
+        label: PROJECT_LANGUAGE_DISPLAY.typescript,
+        hint: "recommended"
+      },
+      {
+        value: "javascript",
+        label: PROJECT_LANGUAGE_DISPLAY.javascript
+      }
+    ],
+    initialValue: "typescript"
+  });
+  return getPromptValue(promptResult);
+}
 async function promptRenderMode() {
   const promptResult = await select({
     message: "Choose a render mode:",
@@ -4312,12 +4198,16 @@ async function promptDatabase() {
 }
 async function runPrompts(projectName) {
   const projectMode = await promptProjectMode();
+  const language = await promptProjectLanguage();
   const cssFramework = await promptCssFramework();
   const renderMode = await promptRenderMode();
+  const useTypeScript = language === "typescript";
   if (projectMode === "frontend-only") {
     return {
       projectName,
       projectMode,
+      language,
+      useTypeScript,
       cssFramework,
       renderMode,
       backendFramework: "gaman",
@@ -4329,6 +4219,8 @@ async function runPrompts(projectName) {
   return {
     projectName,
     projectMode,
+    language,
+    useTypeScript,
     cssFramework,
     renderMode,
     backendFramework,
@@ -4346,24 +4238,25 @@ function getProjectNameFromArgs(cliArgs) {
 }
 function formatFullstackCommands() {
   return [
-    `${import_picocolors.default.dim("# Terminal 1")}`,
-    "cd frontend",
-    "bun install",
-    "bun run dev",
+    import_picocolors.default.dim("# Terminal 1"),
+    import_picocolors.default.cyan("cd frontend"),
+    import_picocolors.default.cyan("bun install"),
+    import_picocolors.default.cyan("bun run dev"),
     "",
-    `${import_picocolors.default.dim("# Terminal 2")}`,
-    "cd backend",
-    "bun install",
-    "bun run dev"
-  ].join(`
-  `);
+    import_picocolors.default.dim("# Terminal 2"),
+    import_picocolors.default.cyan("cd backend"),
+    import_picocolors.default.cyan("bun install"),
+    import_picocolors.default.cyan("bun run dev")
+  ].map((line) => line.length === 0 ? "" : `        ${line}`).join(`
+`);
 }
 function formatFrontendOnlyCommands(projectName) {
-  return [`cd ${projectName}`, "bun install", "bun run dev"].join(`
-  `);
+  return [`cd ${projectName}`, "bun install", "bun run dev"].map((command) => `        ${import_picocolors.default.cyan(command)}`).join(`
+`);
 }
 function printSuccessMessage(projectConfig) {
   const modeLabel = PROJECT_MODE_DISPLAY[projectConfig.projectMode];
+  const languageLabel = PROJECT_LANGUAGE_DISPLAY[projectConfig.language];
   const cssLabel = CSS_DISPLAY[projectConfig.cssFramework];
   const renderLabel = RENDER_MODE_DISPLAY[projectConfig.renderMode];
   const isFullstack = projectConfig.projectMode === "fullstack";
@@ -4374,6 +4267,7 @@ function printSuccessMessage(projectConfig) {
       ${import_picocolors.default.bold(import_picocolors.default.green("Project created!"))}
 
       ${import_picocolors.default.dim("Mode:")}    ${modeLabel}
+      ${import_picocolors.default.dim("Lang:")}    ${languageLabel}
       ${import_picocolors.default.dim("CSS:")}     ${cssLabel}
       ${import_picocolors.default.dim("Render:")}  ${renderLabel}
       ${backendLine}
@@ -4381,7 +4275,7 @@ function printSuccessMessage(projectConfig) {
 
       ${import_picocolors.default.bold("Next steps:")}
 
-        ${nextSteps}
+${nextSteps}
 
       ${import_picocolors.default.bold("Frontend:")} ${import_picocolors.default.cyan("http://localhost:3000")}
       ${isFullstack ? `${import_picocolors.default.bold("Backend:")}  ${import_picocolors.default.cyan("http://localhost:4000")}` : ""}
@@ -4421,4 +4315,4 @@ Error: ${errorMessage}
   process.exit(1);
 });
 
-//# debugId=5A42EB5C435F19ED64756E2164756E21
+//# debugId=F17FA4C670BBE80264756E2164756E21