Design Study 004
A Little More Alive
Footer Study · Character Interaction · Ambient Motion
The study
A small moment of personality at the end of a page. A curious blue-eyed creature follows your attention from a mossy island, while bubbles drift and the surrounding greenery moves in a slow breeze.
What we were testing
- Gaze anchored inside fixed eye outlines
- Continuous eyelid closure
- Independent bubble drift
- Layered foliage movement
- Mobile composition
- Reduced-motion and visibility handling
Creative direction
The supplied blue-and-white character sets the tone: curious, soft and a little unexpected. Expanded teal scenery gives the typography room to breathe. Original Vertical Labs wording connects the playful scene to practical work, while independent movement gives the environment life without moving the page around the visitor.
Build notes
- Native lazy-loaded React study
- Scoped CSS and existing local brand fonts
- Layered local artwork with feathered masks
- SVG texture displacement inside stationary eye rims
- Geometric upper and lower eyelids
- Time-based pointer easing and idle glances
- Independent bubble and plant phases
- Animation pauses offscreen, in hidden tabs and for reduced motion
Recreate the direction
Use the creative brief and starting prompt as a foundation for your own exploration.
The finished study brings together art direction, iteration, interaction design, motion and frontend implementation. The prompt is a starting point.
View Creative Brief
Objective
Create an interactive footer that turns a closing invitation into a small, welcoming character encounter.
Visual principles
Preserve the supplied character’s identity. Give text clear space. Keep eye outlines anchored. Use responsive gaze, believable blinks and a visible but gentle breeze. Let mobile retain the atmosphere with a readable stacked layout.
Avoid
Copying another studio’s mascot or wording. Sliding whole eyes across the face. Revealing a static closed-eye image behind a blink. Synchronized background motion, inaccessible links or animation that ignores reduced-motion preferences.
Read starting prompt
Create an original interactive footer for Vertical Labs using the supplied blue-and-white furry character as the visual starting point. Keep its glossy blue eyes, moss-covered floating island, lush greenery, translucent bubbles and soft teal atmosphere. Extend the landscape to make room for readable white typography. Write original copy: “A curious kind of studio”, “Less busywork. More possibility.”, “What could work better for you?” and “Let’s explore it.” Use real studio navigation and contact destinations, with local Archivo headings and Afacad supporting text. Keep each eye outline fixed in the face. Move only the blue interior texture toward the pointer with quick acquisition and gentle settling. Close upper and lower eyelids continuously onto one curved seam; do not reveal a pre-painted closed eye. Include irregular blink timing and occasional idle glances. Give five bubbles independent, slow drift and the hanging leaves and lower plants a visible soft sway. Avoid moving the text or the entire background. Use a clean water plate under isolated bubble sprites to prevent duplicate edges. On mobile, stack the text above the scene and retain visible bubble and foliage movement in the narrow crop. Respect reduced motion, pause when hidden or offscreen, and clean up every listener and animation frame. Scope all styles and assets to this study.
Have an idea worth building?
Vertical Labs turns concepts into production-ready digital products.