I used different GIF files in this scene and arranged them around the idea of chaotic and unexpected events. Some elements intentionally overlap to emphasize visual tension and depth through layering.
This composite is based on collecting outfit options for a trip, which is something I personally struggle with. I used images with consistent proportions and divided the scene into five equal sections, allowing me to rely on automatic layout behavior while still maintaining a composited visual structure (see CSS notes).
HTML5 compositing is a way of designing web visuals by layering elements on top of each other inside a fixed-size stage. Instead of content flowing naturally from top to bottom, objects are positioned precisely using absolute positioning, and depth is created with z-index. The result feels more like building a scene or collage than a traditional webpage.
This approach differs from standard layout methods like flexbox or grid, which focus on structure, responsiveness, and predictable content flow. Compositing prioritizes visual control and exact placement, making it well suited for hero sections, posters, infographics, and experimental visual layouts.
Compositing through code works especially well when a design needs to be flexible or animated. Because elements exist as separate layers, they can be adjusted, replaced, or animated without recreating the entire graphic. However, this technique is less ideal for long, text-heavy content or layouts that require strong responsiveness, where traditional layout systems or static design tools may be more effective.