← All templates

Animation Tool

Creative Tools · React + Node (Express) · 18 @molecule/* packages

Rive-like animation tool with keyframes, easing, state machines, and export — with built-in Stripe-backed subscription tiers

Open in Molecule

What is inside

  • auth
  • keyframes
  • easing
  • state-machines
  • layers
  • export
  • subscriptions

Screens (14)

  • Landing /
  • Login /login
  • Signup /signup
  • ForgotPassword /forgot-password
  • ResetPassword /reset-password
  • Dashboard /dashboard (signed in)
  • Editor /projects/:id (signed in)
  • Projects /projects (signed in)
  • Library /library (signed in)
  • Export /projects/:id/export (signed in)
  • Settings /settings (signed in)
  • Assets /assets (signed in)
  • StateMachine /projects/:id/states (signed in)
  • SharePreview /share/:token

Data model (12 tables)

  • animation_exports — id, project_id, format, quality, status, output_url, created_at, updatedAt
  • animation_projects — id, owner_id, user_id, name, width, height, fps, duration, …
  • animation_states — id, project_id, name, animation_id, transitions, is_initial, created_at, updatedAt
  • animations — id, project_id, name, target_layer_id, duration, looping, created_at, updatedAt
  • assets — id, owner_id, user_id, kind, url, name, size_bytes, created_at, …
  • devices — id, createdAt, updatedAt, userId, name, pushPlatform, pushSubscription, hasPushSubscription
  • keyframes — id, project_id, layer_id, time, property, value, easing, created_at, …
  • layers — id, project_id, parent_id, name, type, z_index, locked, hidden, …
  • payments — id, createdAt, updatedAt, userId, transactionId, productId, platformKey, data, …
  • resource_tags — id, tagId, resourceType, resourceId, createdAt
  • share_tokens — id, project_id, token, expires_at, created_by, created_at, updatedAt
  • tags — id, name, slug, color, description, createdAt, updatedAt

API (8 handlers)

  • activity api/src/handlers/activity.ts
  • assets api/src/handlers/assets.ts
  • exports api/src/handlers/exports.ts
  • keyframes api/src/handlers/keyframes.ts
  • layers api/src/handlers/layers.ts
  • library api/src/handlers/library.ts
  • projects api/src/handlers/projects.ts
  • states api/src/handlers/states.ts

Subscription tiers

free / pro / team — gated by: maxExports, maxKeyframes, maxProjects, maxStates, advancedFeatures, canExport, retentionDays

Built from 18 @molecule/* packages

Browse all @molecule/* packages →

Required secrets

  • DATABASE_URL PostgreSQL connection string
  • S3_BUCKET S3 bucket for asset storage

The @molecule/* packages are Apache-2.0. The app you build from this template is yours to export and self-host. Licensing