Shotlist

A light storyboard studio with scene lanes, connected reference cards, a procedural shot player, an asset library and simulated render jobs.

• Best forDevelopers building storyboard, video-production and creative asset planning tools.

• Storyboard

  Pan and zoom scene lanes, select shot or reference cards, follow their connectors and edit the selected shot parameters in the inspector.

• Shots

  Review procedural takes with playback, scrubbing, a sequence strip, safe-area controls and camera-path parameters.

• Library

  Search and filter character, location and style references, inspect their details and open the shots that use them.

• Renders

  Follow fictional render jobs and filmstrips, change export presets and inspect simulated credit and GPU-minute figures.

• Connected storyboard canvas

  A three.js board places shot cards in scene lanes and connects reference cards to the shots they feed. Pan, pointer-centred zoom, selection and a minimap are implemented.

• Procedural shot playback

  The same shader scenes supply the board stills, player and library. Take selection, scrub, camera moves and framing toggles demonstrate a production workflow.

• Local creative controls

  Prompts and parameters are editable; library filters and render presets use local data. Generation and exports remain explicitly simulated.

• Responsive and reduced motion

  Four views include keyboard navigation and a layout for smaller screens. The hydration-safe reduced-motion hook shows composed still states; three.js scenes include lighter software-rendering tiers and a fallback when WebGL is unavailable.

Responsive layouts, keyboard-accessible navigation and reduced-motion support.

No AI model or video generation is included. All pictures and playback frames are procedural browser renders. Generation, render progress and credits are simulated; export and download actions create no media file. Connect your own model API, asset storage, job service and backend.

• IncludedFictional demonstration data and local interactions, ready to edit. The included README identifies the data files and model.
• Not includedBackend, database, authentication, payments or AI services. Features that look connected are simulated; connect your own services when you adapt the code.

• Complete Next.js project
• 4 animated views
• Source files and project assets
• README with setup and customization
• LICENSE.md

Stack and requirements

• StackNext.js 16, React 19, TypeScript, Tailwind CSS v4, Framer Motion, Three.js, Lucide icons
• FontsFigtree, Geist Mono
• RequiresNode.js 20.9 or later, npm, and working knowledge of React and Next.js

Run it locally

Extract the ZIP, open a terminal in the project folder, then run:

npm install
npm run dev

Open localhost:3000. The README covers the data, colors, fonts and animations.

• Price$9 USD, one-time payment. No subscription or renewal.
• TaxesApplicable VAT and sales tax are included in the price. The total is shown before you pay.
• LicenseUnlimited personal and client projects. No resale or redistribution of the source. Read the license
• DeliveryAfter payment, Polar emails your receipt and a download link for the ZIP.
• RefundsIf the files don’t install or run as described and can’t be fixed within 7 days, you get a full refund. Refund policy
• Supporthello@buildindex.dev for the template as delivered.

Secure checkout by Polar. More answers in the questions.