Val Town Code SearchReturn to Val Town

1dynamic og image
2db
3react-query

1# React Hono Starter
2
3This app is a starter template for client-side React and server-side Hono.
4
5- **Remix** this starter template on the top right to get started.
7- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.
8
9- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/App.tsx`.
10
11[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.

1/** @jsxImportSource https://esm.sh/react@19 */
2import { createRoot } from "https://esm.sh/react-dom@19/client";
3import { BrowserRouter } from "https://esm.sh/react-router@7";
4import { App } from "./App.tsx";
5

4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>React Hono Val Town Starter</title>
7    <!-- <link rel="stylesheet" href="/public/style.css"> -->
8    <!-- <link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml"> -->

1/** @jsxImportSource https://esm.sh/react@19 */
2import { useState } from "https://esm.sh/react@19";
3
4export function Example() {
6  return (
7    <div class="p-4 ">
8      <h1 class="text-3xl font-semibold mb-2">Val Town React + Hono Starter</h1>
9      <div class="opacity-50 mb-4">Hello world...</div>
10      <div class="my-10">

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4
5// --- Vertex Shader (Simple pass-through) ---
139}
140
141// --- React Component ---
142function App() {
143  const canvasRef = useRef<HTMLCanvasElement>(null);

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useRef } from "https://esm.sh/react@18.2.0";
4
5// --- Vertex Shader (Simple pass-through) ---
139`;
140
141// --- React Component ---
142function App() {
143  const canvasRef = useRef<HTMLCanvasElement>(null);

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useRef } from "https://esm.sh/react@18.2.0";
4
5// --- Vertex Shader (Simple pass-through) ---
140`;
141
142// --- React Component ---
143function App() {
144  const canvasRef = useRef<HTMLCanvasElement>(null);

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useRef } from "https://esm.sh/react@18.2.0"; // Removed useState as amp state not used
4
5// ──────────────────────────────────────────────
73
74// ──────────────────────────────────────────────
75// React component (Corrected render function scope)
76// ──────────────────────────────────────────────
77
312        }}
313      >
314        Radial Bloom (Mic Reactive) - Based on o3 example
315      </div>
316    </div>

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
4
5// ──────────────────────────────────────────────
14`;
15
16// Fragment Shader: Tweaked "Reactive Starfield" with Radial Bloom & Color Emphasis
17const fragmentShaderSource = `
18// Visual Design: Gemini / Google AI
95
96// ──────────────────────────────────────────────
97// React component (using o3's audio capture structure + inertia smoothing)
98// ──────────────────────────────────────────────
99
192        // --- Audio Processing Loop (with Inertia Smoothing) ---
193        let lastSmoothedVolume = 0.0;
194        const attackFactor = 0.35; // How quickly volume reacts going up (0-1)
195        const decayFactor = 0.06; // How quickly volume reacts going down (0-1, lower=slower)
196        const gain = 5.5; // Microphone sensitivity gain
197
263    // --- Cleanup ---
264    return () => {
265      console.log("Cleaning up Reactive Starfield Bloom...");
266      if (webGLAnimFrameId) cancelAnimationFrame(webGLAnimFrameId);
267      if (audioProcessorIdRef.current) cancelAnimationFrame(audioProcessorIdRef.current); // Stop audio loop too
296        }}
297      >
298        Reactive Starfield Bloom by Gemini / Google AI <br /> (Mic Reactive w/ Inertia)
299      </div>
300    </div>
323         <meta charset="UTF-8">
324         <meta name="viewport" content="width=device-width, initial-scale=1.0">
325         <title>Mic Reactive Starfield Bloom</title>
326         <style>${css}</style>
327       </head>