- What happens
- The mosaic tiles forming the orange fish lift off the canvas, animate through a leaping arc over the waves, and leave a dark silhouette in their original position before returning.
- Why it draws attention
- Breaking the 2D surface into kinetic 3D depth subverts the viewer's expectation of a rigid, static mosaic medium, creating immediate visual surprise.
- What to try
- Animate static foreground elements with depth and detachment to transform a traditional aesthetic into dynamic motion graphics.
Back to casesCreate a product video
Glass & gold-leaf mosaic film (WebGL2)
Loading…
Production skill
Skill disclosed
Translation
Make an 80 second square animated film as a single HTML file, using WebGL2 and plain JavaScript, with no libraries and no image, font or audio files. It should look like a glass and gold leaf wall mosaic whose tiles were never glued down, so they can lift, flip, fly and click back into place. Figures are flocks of tiles, so a fish swims by its tiles swimmingScene analysis
5- What happens
- The seagull and sailboat tile clusters peel away from the mosaic plane, floating and banking gracefully against the gold background before snapping back into place.
- Why it draws attention
- Coordinating multiple detached elements in contrasting flight paths enhances spatial complexity and builds playful narrative momentum.
- What to try
- Layer multiple moving components at varying trajectories to prevent visual repetition and sustain audience engagement.
- What happens
- A circular cascade of dark blue and white sparkling tiles replaces the warm golden sunlight and sky, seamlessly transforming day into a starry night seascape.
- Why it draws attention
- A thematic environmental shift driven by a sweeping geometric wave creates a dramatic mood transition without requiring a hard cut.
- What to try
- Use particle or tile replacement waves to smoothly transition lighting, color palettes, and environments within a single camera frame.
- What happens
- The scattered starlight tiles coalesce and morph into a detailed flying crane that glides across the dark night sky before dissolving back into stars.
- Why it draws attention
- Transforming abstract particles into a distinct figurative creature provides a satisfying moment of pattern recognition and poetic storytelling.
- What to try
- Group dispersed particle elements into recognizable organic silhouettes to introduce secondary characters and emotional resonance.
- What happens
- The entire mosaic disintegrates from the top-left corner, swirling into a dense central vortex of multicolored tiles before expanding back to reform the original seaside image.
- Why it draws attention
- Deconstructing the entire composition into a chaotic swirling vortex serves as a high-energy climax before resolving into familiar stability.
- What to try
- Escalate visual spectacle by breaking down the whole scene into a central dynamic motion before snapping back to order.