Dogamotion.

Description

Dogamotion is a web-based motion design platform for creating animated visual content directly in the browser. Users can upload images, choose animation templates, adjust parameters, preview changes instantly, save projects, and export the final result.

Background

This project explores how browser technologies can be used to provide a lightweight creative workflow for motion-based content creation. The focus is building an editor experience where animation templates, customization controls, and export capabilities work together in one application.

Goal

The goal is to create an accessible motion design workflow that allows users to transform static images into dynamic animations without requiring complex desktop editing software.

Features

• Image-based project creation with customizable motion templates.
• Real-time preview editor with adjustable parameters.
• Project saving system with user authentication and storage support.
• Export capabilities for animated video and reusable component output.
• Template-based architecture where each animation has its own rendering logic.

Technologies

• Next.js App Router and React for the application framework.
• TypeScript for type-safe development.
• Supabase, PostgreSQL, and Drizzle ORM for authentication and project data management.
• Canvas rendering for animation playback and export processing.
• Web APIs for browser-side rendering workflows.

Technical Decisions

The animation system separates template data from rendering logic. Each template contains its configuration and drawing implementation, allowing previews and exports to share the same rendering foundation.

The architecture separates editor preview, video export, and code export flows while keeping animation logic reusable across different outputs.

What I Learned

Building a motion editor requires balancing creative flexibility and technical structure. A reusable template system makes it easier to add new animations while maintaining consistency across the editor and export pipelines.

Notes

This project focuses on browser-based animation creation and reusable motion systems.