Log into Dashboard →
Build brief · for Sara

Spinning Record Animation Generator

Upload 2–3 images → turn them into a simulated spinning-record animation for Instagram, TikTok, reels, and short visual posts. Read the brief, then log into the dashboard to start building.

Signs you in with your NPC Google account — you'll land on your workspace.
ALLDEUCES
🎵
🌀
👁️
🔥
💿
Live preview — a spinning gallery, faked in pure CSS. This is the vibe; your builder will turn real image uploads into spinning-record videos like this. Swap it out whenever you're ready.

Goal

Build an app that lets Sara upload two or three static images and turn them into a simulated spinning record animation for Instagram, TikTok, reels, ads, and short visual posts.

This app does not need to create print-ready artwork. The final product is a digital video that looks like a record, disc, sticker, or circular graphic is spinning and animating.

Core Idea

The user uploads two or three images. The app generates a looped animation between them, places the animation around a circular "record" layout, then renders it as a spinning video with camera effects, lighting, blur, and optional strobe-style motion.

Primary Output

The app should export short social media videos. Recommended export formats:

MP4GIFWebM Instagram ReelSquare postStory

MVP Features

1 · Upload Images

User uploads two or three source images. The app lets the user:

CropScaleRotateCenterRemove background (if possible)Center / outer ring / both

2 · Generate Transition Frames

The app creates animated frames between the uploaded images. MVP transition styles:

CrossfadeMorphPulseZoom in/outSpin distortionGlitchWavy liquidFlipbook frame jump

3 · Simulated Record Layout

The app places the generated frames onto a circular record-style design. Layout options:

Classic vinylColor recordPicture discHolographicSticker discMagic card token discNPC brandedCustom background

4 · Spin Simulation

The app creates a fake spinning effect. Controls:

RPM / spin speedDirectionMotion blurStrobeCamera shutterLight reflectionDepth shadowCenter wobbleTurntable wobbleLoop smoothness

5 · Social Media Preview

Preview the final animation in social formats:

1:1 square4:5 feed9:16 Reel / Story16:9 landscape

6 · Export Video

Export a finished video with:

User Flow

  1. Sara starts a new project.
  2. She chooses a format: Reel, Story, square post, or landscape.
  3. She uploads two or three images.
  4. She selects an animation style.
  5. The app generates transitional frames.
  6. The app wraps those frames into a spinning record layout.
  7. Sara adjusts spin speed, lighting, blur, and background.
  8. She previews the looping animation.
  9. She exports an MP4 or GIF for social media.

Important Difference From a Physical Zoetrope

This app does not need physical accuracy. It does not need:

Print safe zonesDPI settingsCut linesBleedCenter hole guidesReal strobe calibration

It only needs to look cool on screen. The visual goal is "this looks like an animated spinning record," not "this will work when physically printed."

Suggested Visual Effects

Effects that make the animation feel more alive:

Vinyl groovesReflective shineDust particlesLight sweepCamera shakeOff-center wobbleChromatic aberrationVHS filterGlitch burstNeon ringSmoke / glowAnimated backgroundBeat-synced pulsing

Technical Scope

Front End

React / Next.jsCanvas renderingWebGL / Three.jsTimeline controlsDrag-and-drop image editor

Rendering Engine

Canvas API (MVP)Three.js (disc lighting)FFmpeg (MP4/GIF export)AI image interpolation (later)

Backend

Image uploadFrame generationVideo renderingProject savingExport storage

MVP Success Criteria

The MVP is successful if Sara can:

Best MVP Version — start here

Two-image uploadCrossfade animationSpinning vinyl templateMotion blurLight reflection overlay9:16 Reel exportMP4 output

Once that works, add AI morphing, beat sync, templates, and advanced effects.

Advanced Feature Add-On

2.5D Breakout Mode

An advanced visual mode where the spinning record begins as a flat circular graphic, then the animation "breaks the 2D wall" during the final zoom. Selected elements rise off the rotating disc, tilt toward the camera, and move independently above the record. It should feel like a trippy music visualizer, motion poster, or animated album cover.

Visual Behavior

Starts with: a fake spinning record, circular animated graphics, motion blur, light sweeps, zoetrope-style frame motion. Then on the final zoom pass: foreground objects separate from the disc, graphics stand upright, some float above the record, text/characters orbit the disc, the camera pushes through or over the surface, and the flat artwork becomes a layered 2.5D composition.

User Controls

Breakout timingWhich layer pops outPop-out heightTilt angleCamera zoom strengthRotation speedDepth blurGlow intensityTrail effectFreeze frame / loop return

Breakout Styles

1 · Pop Up PosterImage elements rise like cardboard cutouts from the record.
2 · Liquid PortalThe center turns into a portal and the image flows upward.
3 · Sticker ExplosionGraphics peel off the disc like stickers, float toward the camera.
4 · Album Cover AliveThe main subject stands upright while the record spins underneath.
5 · Neon Ritual CircleSymbols, text, or characters orbit above the disc with glow trails.
6 · MTG Token SummonA character/object rises from the graphic like a summoned token.
7 · Glitch BreakoutThe image tears, duplicates, offsets, and snaps into layered depth.

Layer System

Background discRecord groovesMain artworkForeground cutoutText layerGlow layerParticle layerShadow layer

For MVP, use automatic subject cutout or let the user upload transparent PNGs.

Breakout MVP

Support one spinning record layer, one foreground image layer, a final zoom camera move, the foreground lifting up from the record, a simple shadow under the lifted object, and MP4 export for Instagram. Flow: upload background record art → upload/select a foreground cutout → choose "Breakout Mode" → preview the flat spinning record → at the final beat the cutout stands up → camera zooms in → glow/blur/shadow added → export a looping vertical video.

Technical Notes

Do it without true 3D at first — fake depth via layer scaling, perspective transform, X-axis rotation, drop shadow, motion blur, glow, camera zoom, and parallax. Later, Three.js for real 3D camera movement, lighting, and depth.

Final Output Goal

The final video should feel like a spinning record, animated poster, music visualizer, and surreal motion graphic mashed together. It should not feel like a technical zoetrope tool — it should feel like a machine for making weird, high-impact social media visuals.

Log into Dashboard →
AllDeuces · built on the NPC ecosystem