mobile view animation gallery
mobile view voting and proposing
mobile view chat
Mobile view canvas and tools
Animation GIF on a post
weekly pitch clapperboard post
canvas , tools and chat
voting and proposing

🎬 Kinora

A whole community draws one hand-drawn animation together — one frame at a time, at up to 12 FPS — without ever leaving Reddit.

Inspiration

Inspired by anime (and the independent animators behind it), the frame-by-frame timing of classic 2D fighting games, and the collaborative spirit of basepaint.xyz.

The idea: a lightweight, persistent place where the whole community co-creates hand-drawn animation, one frame at a time — and where the fun is in watching it happen together.

What it does

Kinora turns a subreddit into a shared animation studio. Every week the community draws one short film together:

🗳️ Vote the weekly bundle — theme + a 6-color palette + up to 4 brushes + a "director," decided by collective voting (with a curated house preset so the canvas is never empty).
✏️ Take a turn, draw a frame — on top of the previous one (onion-skin guide), using only that week's palette and brushes.
🔴 Watch it happen live — while one person draws, everyone else sees the strokes appear in real time, with the actual brush effects.
🎞️ Automatic payoff — every frame is auto-posted as an image comment, and at week's end all frames are stitched into an animated GIF and published back to the subreddit as the community's finished short.

It plays the same with a finger on a phone as with a mouse on desktop.

How we built it

Stack

Devvit Web (client + server) — the whole app lives inside Reddit
Redis — week anchor, turn locks, votes, frame metadata
Reddit Media API — frame PNGs + the weekly GIF, hosted on i.redd.it
Devvit realtime — live spectating (streaming strokes, keyframes and turn changes)
React + TypeScript, minimal Tailwind utility layout
gifenc + upng-js for GIF encoding

What we added this cycle

📱 Mobile-first canvas — finger drawing (one finger draws, two pinch-zoom/pan), a vertical 9:16 fixed-resolution canvas (720×1280) so every device produces identical, video-coherent frames, a collapsible tool drawer, a compact bottom nav, and an HSV color-wheel picker that replaces Reddit's clunky native mobile color input.
🖌️ A hand-written brush engine — 12 brush characters (ink, marker, pencil, charcoal, watercolor, acrylic, airbrush, spray, splatter, smudge, calligraphy, glow, pixel, multi-stamp) with device-independent velocity dynamics (width & opacity respond to speed even on touchscreens that report no pressure), a "pulled-string" tremor stabilizer, and quadratic-curve smoothing. Voters even see a live sample stroke of each brush before choosing.
🌐 Live spectating over Devvit realtime — we extracted the brush engine into shared code so both the artist and every viewer run the exact same renderer; spectators watch real textures form in real time (not a flat placeholder). Eraser, fill and clear stream live too, and a periodic keyframe snapshot keeps late-joiners in sync.
🔁 Cross-device turn resume — an in-progress frame is shared server-side, so you can continue a turn on another device, or after closing the app.

Process — started as a dual setup (Vercel + Devvit), then refactored to a single Devvit-focused codebase, removing redundancy and moving image storage onto the native Reddit image pipeline (no custom hosting required).

Challenges we ran into

Sudden loss of access to stored images (root cause still unknown). Spinning up a fresh app instance fixed it temporarily; migrating to the Reddit Media API solved it permanently.
Real-time drawing with real effects. Wiring Devvit realtime from scratch — clients can't publish directly, so the artist's smoothed segments round-trip through the server in ~150 ms batches, a shared brush engine reproduces the effects on the viewer's side, and a keyframe snapshot reconciles the exact pixels.
Pressure on touchscreens. Phones report a constant pressure value, which flattened the brush dynamics — so we drive width and taper from stroke velocity instead, making brushes feel alive on any device.
Frame coherence. Different screen sizes produced mismatched frames that broke the GIF; a fixed 720×1280 backing store fixed it.

Accomplishments we're proud of

Live, shared drawing where you watch real brush effects render in real time.
A single brush engine powering both the artist and every spectator.
Genuinely mobile-first finger drawing that scales cleanly to desktop.
Reliable image + GIF hosting entirely inside Reddit's ecosystem.
A palette + brush + voting system refactored into a concise UI footprint, with a fast iteration loop fully inside Reddit.