12toons

Rule: error messages are user-friendly Hinglish. Every error a user sees is written in simple Hinglish (Roman Hindi + common English words), never raw English or raw Firebase text. See docs/ERROR-MESSAGES.md and shared/hinglish-errors.js.

Rule: DragonBones only. The Spine library is not used. All rigs and animation data are DragonBones, and all code uses only the DragonBones runtime. See CLAUDE.md.

AI animation studio that runs in the browser.

• 12toons – animation workbench: characters, backgrounds, audio lines (ZIP, optional) → AI direction → camera → export (WebM / MP4, up to 4K).
• 12toons Character Studio – start from a template (Neha / My Baby, 5 poses each) or any DragonBones character ZIP (skeleton _ske.json + texture _tex.json + picture); every layer can be uploaded (png / svg), downloaded, removed, locked, recoloured and nudged; face fitting (eyes, brows, nose, lips, ears); outfits; live preview with animations and mouth test. Save = baked character in this device's database and in your account (Firestore + R2); the animation studio loads exactly that character.
• Auto-direct with any AI (no key): step 2 / AI tab → Download brief (.txt) → give it to Claude / ChatGPT / Gemini → Import AI file. The AI picks shot, who is on screen and which animation plays at which second for every dialogue.
• Props & Effects: admins publish them in Admin → Props & Effects; creators add them from the studio's Props / Effects tabs. See docs/PROPS-EFFECTS.md.
• Security: server-side checks, hardened headers and a shield that alerts the admin when a creator opens the developer tools. See docs/SECURITY-SHIELD.md.
• Flow: landing page → Google login → hub (choose one of the two tools).
• Theme: white background, blue accents, black + blue buttons.

Run

npm install
npm run dev       # http://localhost:5173  (add ?debug to skip the login while testing)
npm run build

Accounts, projects and cloud

Both studios now open My Projects. Drafts are saved in account/project-scoped IndexedDB and automatically synchronized through authenticated backend APIs. See Security rollout before deploying: Firebase Admin credentials, server-managed sessions and matching Firestore rules are required for production login.

Admin panel (hide / show animations)

Open Hub → 🛠 Admin panel (#/admin). Pick a character and a pose, preview any animation live on that character, then switch it on or off (for that character, or for every character) and press Publish to users. Users no longer see hidden animations in the pickers, the AI brief and the Character Studio preview (animations already placed in an existing project keep playing).

• Admin access is checked by the backend using an enabled securityAdmins/{uid} document. Email lists and VITE_ADMIN_OPEN no longer grant access.
• Users & Security provides account moderation, session revocation, device review and audit history.
• The debug login is available only in the Vite development server.

Timeline clips + camera keyframes (animation studio)

• Animations, as many as you like: every character has its own lane under the audio. Press ＋ on the lane (or tick "Add on the timeline at the playhead" in the Animations tab) to place an animation at the playhead — the same one again too. Drag a clip to move it, drag its right edge to stretch (it loops), or use Duplicate / Split / Replace / Delete in the bar above the timeline. Your clips win over the automatic ones (the automatic clips are cut around them). Hand / legs / face layers get their own rows. In a scene without audio the length grows with your clips.

• Camera keyframes: the Camera tab (and the 🎥 lane). Move the playhead and drag the orange frame on the stage (corners = zoom): a keyframe is made there. Each key has zoom, position and how it moves to the next key (smooth / even / slow start / slow end / cut). The editor shows the whole canvas with the frame; only what the camera sees is rendered into the video ("Camera view" previews it). No keys = the automatic shots per audio line as before. Camera roll (tilt) is not supported.

• Character keyframes (🏃 Move tab and a ◆ lane under the character): keyframes for position, height, size and facing. Press ＋ Keyframe here, move the playhead, then drag / resize the character on the stage (a keyframe is made automatically) — the character glides between keyframes (smooth / even / slow start / slow end / jump). Camera and character keyframes are independent.

• Canvas size: 9:16, 16:9, 1:1, 4:5, 3:4, 4:3, 21:9 or any custom ratio (Camera tab).

• Layers page (🧩 in the admin panel): rename any Character Studio layer or group and switch layers on / off for users (for one character or all). Off = the layer is not in the users' list (the picture stays on the character). Stored in Firestore config/layers; the layer size line (174×405) is no longer shown in the Character Studio.

Video without voice

Export works with no audio at all: the video is 8 seconds and silent (no audio track). With audio, the length follows the voice as before.

Where things are

• src/shell.js – landing, login, hub, routing (#/, #/login, #/hub, #/toons, #/characters)
• src/main.js – the 12toons animation studio · src/stage.js – renderer · src/lipsync.js, src/exporter.js
• src/charstudio.js – Character Studio · src/ai.js – OpenRouter AI director (key stays in the browser)
• src/firebase.js, src/cloud.js, src/binary-cloud.js, src/project-sync.js, api/r2.js, api/projects.js – login, Firestore, Realtime Database, R2 files (signed links) and project sync. Where data lives and what it costs: docs/COST-PLAN.md. Optional: the character library can move to the 12toons R2 bucket (folder lib/), tooling in docs/LIBRARY.md
• HANDOFF.md – architecture notes