[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-96473":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":17,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":10,"trendingCount":15,"starSnapshotCount":15,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},96473,"flute","webprodigies-org\u002Fflute","webprodigies-org","Cinematic 3D scenes from your live React UI. Flute by Web Prodigies.","https:\u002F\u002Fwww.youtube.com\u002F@webprodigies",null,"TypeScript",184,66,116,0,48,144,90.18,"MIT License",false,"main",true,[],"2026-09-21 04:01:30","# Flute by [Web Prodigies](https:\u002F\u002Fwww.youtube.com\u002F@webprodigies)\n\nCinematic 3D scenes made from your **real React UI**. Your coding agent composes the camera, depth, focus and motion. Flute provides the renderer, scene library, playback and MP4 export. Your app keeps its components, providers and styles.\n\nOpen source under the [MIT license](LICENSE). Runs locally, with your existing coding agent. No account or AI subscription connection is needed in Flute.\n\n## Install into your app\n\n**React DOM 18.2+ or 19**, with **Node 22.12+** for the CLI. The renderer is independent of your router and build tool. Setup has automatic connections for Next.js App\u002FPages Router and standard Vite projects; other React hosts use the same portable wrapper without changing frameworks.\n\nFrom your existing app's directory, **create a separate Git branch before installing**. Flute adds integration and scene files to your codebase; a branch keeps those changes separate while you create and review your animations. Commit or stash any existing work first:\n\n```sh\ngit switch -c flute-scenes\nnpm install @webprodigies\u002Fflute\nnpx flute init\nnpm run dev\n```\n\nKeep your existing dev server if it is already running. Use the URL it prints:\n\n```sh\nnpx flute open --url http:\u002F\u002F127.0.0.1:5173\n```\n\nIn Next.js, open `\u002Fflute` on your existing dev server (usually port 3000). Setup adds this development-only route without rewriting your app\u002Flayout\u002Fproviders. In Vite, setup connects the existing root. Both create `FLUTE.md`. Repeating setup is safe; conflicting user-owned files get a repair message. Normal app routes and production builds remain ordinary. One installed app owns one scene catalog.\n\n## Other React hosts (including Electron renderers)\n\nRun `npx flute init --adapter react`. Setup creates a framework-independent wrapper and tells your agent how to connect it. It deliberately does not guess or replace your application root:\n\n```jsx\nimport { FluteProjectPreview } from \".\u002Fflute\u002FProjectPreview\";\n\n\u003CExistingProviders>\n  \u003CFluteProjectPreview enabled={yourDevelopmentFlag}>\n    \u003CExistingApp \u002F>\n  \u003C\u002FFluteProjectPreview>\n\u003C\u002FExistingProviders>\n```\n\nFor production bundle exclusion, have your agent load the generated module only behind your bundler’s compile-time development condition. The `enabled` prop is a runtime guard, not a substitute for removing development imports. Next and Vite automatic connections include their native compile-time guards.\n\nUse your host's actual development flag, then open its route with `?flute-preview=1`. For a dedicated route, pass `active`. This uses the existing React renderer, including Electron's renderer process; no changes to main\u002Fpreload, security settings or build tools. A React Native application without browser DOM is not supported.\n\nThe underlying `ProjectPreview` export accepts `projectId`, `enabled`, optional `active`, `sceneModules` (lazy module loaders) and `children`. This is the shared integration contract; named framework connections are conveniences, not renderer dependencies. Next.js scene bindings are client components: keep server-only imports in the host's server layer and supply their data through that boundary.\n\n## Give your coding agent this prompt\n\n> Read FLUTE.md and run `npx flute guide --json`. Inspect this app's real dashboard page and create a cinematic Flute scene from its existing components. Choose intentional close perspective, camera travel and depth of field. Preserve the app's design and providers. Verify it in the browser, save a snapshot, and give me the scene URL.\n\nReplace “dashboard” with the page you want. Claude Code, Codex CLI or another repository-capable agent can use the same installed guide; Flute does not run or authenticate the agent for you.\n\nThe guide explains concepts, tradeoffs, exact APIs and a tested file-pair example. It leaves the composition to the creator. Ask your agent to revise the source when you want a different shot.\n\n## Scenes and studio\n\nThe agent creates `src\u002Fflute\u002Fscenes\u002Fmy-shot.scene.json` and matching `my-shot.tsx` or `my-shot.jsx` (one component per recipe). JSON owns the scene definition; the component imports actual host UI and returns stable `Surface` elements. The shared studio supplies the camera renderer, playback and capture—no separate scene editor or duplicated renderer.\n\nOutside Vite, run `npx flute sync` after adding\u002Fremoving scene pairs. Existing file edits use your host’s hot reload. Open the scene library, select a scene, play or seek, and revise its source through your running dev server.\n\n```sh\nnpx flute scenes\nnpx flute open --scene my-shot --url http:\u002F\u002F127.0.0.1:5173\nnpx flute snapshot --scene my-shot --url http:\u002F\u002F127.0.0.1:5173\n```\n\nSnapshots cache rendered local pixels in the recipe. Refresh them after visual changes; they may include visible app data.\n\n## Export video\n\nInstall FFmpeg on your system and Chromium once:\n\n```sh\nnpx playwright install chromium\n```\n\nThe studio's Export control supplies the command for the selected scene. For example:\n\n```sh\nnpx flute export --url 'http:\u002F\u002F127.0.0.1:5173\u002F?flute-preview=1&flute-scene=my-shot' --output my-shot.mp4 --fps 60\n```\n\n30, 60 and 120 FPS are supported. Export samples the live scene deterministically and excludes studio controls. Choose a new output filename; existing files are not overwritten. Keep the host server running. Camera depth of field uses performant DOM blur approximation, not ray-traced bokeh.\n\n## Work on Flute\n\n```sh\nnpm ci\nnpm run verify:agent\nnpm run build\nnpm run setup:local\nnpm run dev\n```\n\nThe separate `local-project\u002F` exercises installation with real scenes; it is not shipped in the package. The unconnected product opens with an honest empty scene list.\n\nRead [architecture](docs\u002Farchitecture.md) for canonical code owners and [product](docs\u002Fproduct.md) for scope. The installed `flute guide` is the authoritative authoring reference. Build and boundary checks reject architectural drift.\n\n## Maintainer release\n\nAll tests run locally. GitHub Actions only builds and publishes a new npm version; it does not run verification suites or upload artifacts.\n\n1. Update the package version with `npm version patch --no-git-tag-version`.\n2. Run `npm ci`, install Chromium and FFmpeg, then run `npm run verify:release` locally. This includes architecture, browser, installed-app, export and hardware checks. Logs remain in `.release\u002Flogs\u002F`.\n3. Commit the verified version and lockfile, then push to `main`. The publishing workflow checks npm first. If that version already exists, it stops before installing or building. Otherwise it runs `npm run build:package` and publishes through OIDC. npm versions are immutable; changing source without a version bump does not update the public package.\n4. Run `npm run test:published` locally after publication to check the exact public version in a fresh installed app.\n\nThe public source is [webprodigies-org\u002Fflute](https:\u002F\u002Fgithub.com\u002Fwebprodigies-org\u002Fflute), and the package is `@webprodigies\u002Fflute`. npm's trusted publisher uses GitHub owner `webprodigies-org`, repository `flute`, workflow `publish.yml`, environment `npm`, with direct `npm publish` permission. The GitHub environment permits the `main` branch. Never commit npm tokens.\n\nCode-only and documentation-only pushes do not start a workflow. Package\u002Flockfile or publishing-workflow changes can trigger the small version lookup. A failed release can be retried through Actions → Publish npm package → Run workflow on `main`; an existing npm version will safely skip. There is no automatic tag-based or pull-request test workflow.\n\n`verify:ci` remains a local alternative without hardware timing checks; `verify:release` retains the full hardware gate. GitHub does not enforce those local results, so the maintainer is responsible for running them before pushing a release version.\n\nFor manual publication, run `npm run release:publish` locally from the clean committed candidate and complete npm's private authentication prompt. For source-only testing, `npm run release:local` builds a tarball in `.release\u002F`; `npm run setup:local` installs it in the isolated local host.\n",2,"2026-09-20 02:30:11","CREATED_QUERY"]