Motion Canvas

Question: How can a personal archive preserve what makes movement worth remembering?
Medium: Software
Year: 2025
Role: Product Designer & Engineer (Founder)
Skills: Software Development, Design, Svelte Flow, Product Design, Product Engineering

An infinite spatial canvas built specifically for motion designers to archive, organize, and reference GIFs without the limitations of static moodboarding tools.

Details

Motion Canvas addresses the frustration of using static reference tools for time-based media.

Built with Svelte Flow for high-performance rendering, it allows designers to arrange movement spatially, enabling a better understanding of timing, easing, and transition flow in a distraction-free environment.

Process

Identified the technical limitations of existing moodboard platforms regarding high-fidelity motion reference
Defined a 'ruthlessly simple' feature set focused on performance and spatial organization
Architected the application using Svelte Flow to ensure smooth panning and zooming with multiple concurrent video assets
Optimized GIF loading states and interface visibility to create an 'invisible' user experience
Iterated on light and dark mode UI to ensure the tool recedes behind the motion content being referenced

See other projects

WOB

How can we lower the friction of water access to turn individual recreation into a modular social experience?

Aeolus / Yacht Design

Details

Process

How can we lower the friction of water access to turn individual recreation into a modular social experience?

How can rigorous hydrodynamic modeling inform the aesthetic soul of a high-performance vessel?

How can we lower the friction of water access to turn individual recreation into a modular social experience?

How can rigorous hydrodynamic modeling inform the aesthetic soul of a high-performance vessel?

How can a modular lighting block become the core of an expandable everyday system?

How do you redesign a platform when the actual users aren't the customers, but the internal agents managing them?

How do you scale a product when the technical complexity of onboarding exceeds the client's ability to self-serve?

How can a technical visual language enhance the emotional narrative of automotive filmmaking?

What identity can carry both mechanical force and cinematic sensitivity?

What becomes possible when several artificial perspectives disagree in the same room?

How can we use generative AI to help humans visualize and navigate the hidden complexity of systemic challenges?

How can we turn a dry, bureaucratic obligation into a viral moment of social responsibility?

Can removing the visual element of dating apps foster more immediate and authentic human connections?

How can minimalist design principles preserve the legacy of a historic maritime icon?

How can a utilitarian hardware component be distilled into its simplest symmetrical form while maintaining its structural integrity?

What is the state of Polish yacht industry in 26'?

How can aerial perspectives transform a sporting event into a rhythmic visual narrative of wind, water, and movement?

How can we connect people over what they are already interested in?

How can sailing students master complex boat handling maneuvers when they only have limited access to expensive on-water training hours?

How can we document a developer networking event without it looking like a generic corporate gathering?

What if you could get real-time insights during your call, instead of after?

How can limited mobile tools be used to capture the raw essence of a journey in real-time?

How do we make transparency the default in environments where silence is the status quo?

How can we use spatial computing to eliminate the physical distractions of learning?

How can aerial perspectives and intimate camera work illustrate the ecological impact of a single man and his horses on the Spanish landscape?

How can I use generative AI to visualize a more sustainable future for my own city?

How can virtual environments foster deeper collaborative critique for spatial products?

How can creative facilitation break down the barriers between local government and the citizens they serve?

How can spatial computing tools redefine the way we facilitate collaborative design workshops?

How can design facilitation accelerate the transition of complex, multi-national energy systems?

How can a minimalist visual language build trust between a creative agency and a social impact hub?

How can we help farmers overcome the personal and financial friction of transitioning from conventional to regenerative agriculture?

How can a minimalist aesthetic build trust while leaving room for creative spontaneity?

How can we apply specific therapeutic protocols like narrative restructuring into a mobile interface to clinically reduce nightmare frequency?

How do we help farmers learn?

What could be modern interface for effective democracy?

How do we help people discover civic tech projects?

How can we translate the raw beauty and ecological mission of the farm into a professional visual language that secures long-term investment?

How can static frames and environmental audio be used to translate the internal tranquility of a forest into a cinematic experience?

How can I use a static frame to remove the filmmaker's ego and allow the raw, quiet textures of nature to speak for themselves?

How can we create a compelling promotional video for a mathematics program when we lack high-end film footage of abstract concepts and campus life?

How can complex energy data be visualized to empower fleet managers toward carbon neutrality?

How can we use mixed-media cinematography and geospatial CGI to make a domestic space feel like an expansive urban symphony?

How does the physical act of repetition serve as both a therapeutic process and a generative tool for structural emergence?

How do the specific patterns of ceramic tiles and architectural shadows define the city's unique visual essence?

How can architectural photography reveal the specific rhythmic patterns and structural character that define Lyon's urban landscape?

How can a digital interface reduce the cognitive load of managing a live group process?

How can we provide people with a centralized library of accessible mental health tools?

How can a modular design system transform a traditional manufacturing firm into a modern, cohesive visual presence that scales from business cards to car liveries?

How can motion design bridge the gap between scientific research and regional climate policy?

How can film bridge the gap between a design studio's process and a city's public identity?

How can motion design principles inform the presentation of static industrial objects?

How can motion design translate the physical energy of a vehicle into a digital-first advertising campaign?

Can we tell a narrative story by traveling through the architecture of a single pin to reveal the scale of its impact?

How can motion design translate abstract performance data into a visceral visual narrative?

How can we use abstract, high-contrast motion design to evoke the mechanical soul of driving before a single word is spoken?

How can we use the science of storytelling to turn abstract climate data into urgent local action?

How can technical precision become a visual experience people can feel?

How do you visualize the invisible flow of electricity to define a brand's future?

How can aerial perspectives and intimate photography visualize the existential threat of rising sea levels for a global audience?

How can motion design enhance the perceived technological sophistication of a luxury automotive brand?

How can we use stylized motion graphics and aerial perspectives to make invisible LiDAR data feel like a tangible, high-end security asset?

How can motion design bridge the gap between abstract hardware concepts and human understanding?

How can motion graphics bridge the gap between traditional campus footage and a modern brand identity?

How can motion design translate complex medical engineering into a compelling visual narrative for athletes?

How do you visualize the invisible infrastructure of AI and 5G on a massive scale?

How can motion design bridge the gap between digital gameplay and the visceral energy of live sports?

How do you translate a studio's physical energy and creative ethos into a two-minute visual narrative?

How can the physical properties of glass be translated into a digital broadcast identity?

How can technical data like LiDAR be transformed into a compelling visual narrative that sells a product's precision?

How can motion design translate abstract data processing into a tangible, architectural experience?

How can motion design serve as a narrative compass, using 3D cartography and aggressive typography to mirror the intensity of the drivers?

How can the mundane geometry of a city be reframed to reveal hidden, abstract beauty?

How can motion design bridge the gap between complex policy and public understanding?

How do you maintain creative 'magic' when technical constraints and budget realities force a shift to a fully digital production?

How can architectural filmmaking capture the synergy between a developer's vision and a building's physical impact on a city skyline?

How can 3D spatial compositions and kinetic typography serve as the primary architecture for a festival's brand system?

How can we distill a day of complex digital innovation into a human-centric story that resonates with both attendees and stakeholders?