.png)
⚙️ Case Study (Part 3): Interaction, Motion & Sound Systems
- Barbara Franco
- Oct 11, 2025
- 6 min read
Updated: Dec 12, 2025
In games, motion and sound do more than decorate: they guide behavior, confirm actions, and create atmosphere. For this part of the project, I wanted to bring some of that feeling into the site, without turning it into something distracting or heavy.
This post covers how I shaped motion, feedback, and audio so the interface feels alive but stays focused. I leaned on motion for rhythm, sound for feedback, and a few workarounds to keep everything stable inside Wix Studio.
1. The Goal
Make the interface feel cinematic and alive, while staying readable. Animation should support the content, not steal attention. Sound should confirm actions and set atmosphere, while staying subtle and unobtrusive.
2. What I Optimized For
Readability first, then style.
Predictable feedback on both mouse and touch.
Personality that never competes with content.
Practical solutions inside Wix Studio’s limits.
3. Animation System
Entrance rhythm → Screens reveal in layers: world first, information second, controls last. Background and hero fade in, titles slide into position, then buttons arrive with a short offset. That sequence keeps pages readable and sets the pace.
Desktop vs mobile → Desktop keeps slightly longer reveals for atmosphere. Mobile pulls CTAs in earlier, shortens motion distances, and trims decorative motion so taps feel instant.
Ambient motion → Only the larger, stylized stars animate. They breathe gently on the main screen and appear as small accents on Contact, while the subtle background star field stays static. This keeps the sense of space without overwhelming the interface or distracting from the text.
▹ Performance Budget :
Tap feedback → desktop and tablet shrink 0.2s to 95% with text color change 0.2s. Mobile shrinks 0.12s to 96% with text color change 0.10 to 0.15s.
Hero reveal → 2.0s on desktop, 1.8s on tablet, 1.6s on mobile.
Buttons → entrance 1.2s. Delays start at 2.2s on desktop, 2.0s on tablet, and 1.9s on mobile. Add 0.1s per extra button. Back and Up buttons use 0.3s and 0.4s delays so navigation feels ready early.
Page titles → desktop fade 0.7s after a 1.0s delay, mobile 0.6s after a 0.7s delay (Tablet sits between as needed).
Background star field → desktop and tablet grow over 2.5s (delay 0.6s, scale 90%, distance 10%). Mobile grows over 2.0s (delay 0.4s, scale 88%, distance 8%).
Decor stars near hero → desktop fade 1.2s with staggered delays tablet sits between, mobile fades ~1.0s with earlier, tighter spacing. Loop breath distances are smaller on mobile to avoid jitter.
Galleries → wrappers reveal 1.2s on desktop and 1.0s on mobile. Tablet uses desktop gallery timings because it shares the same Pro Gallery setup, only modified in layout.
▹ Why these timings :
→ Responsiveness: tap feedback lands within 0.10 to 0.20s, which reads as immediate without feeling twitchy.
→ Readability: reveals sit around 1.0 to 2.0s so background, titles, and then controls register in a calm order.
→ Focus: the +0.1s stagger per extra button creates a clear reading sequence on wide layouts and prevents everything arriving at once.
→ Mobile comfort: shorter distances and slightly earlier CTAs reduce thumb travel and keep text stable, avoiding shimmer on small screens.
→ Motion hygiene: only large stars breathe, the static star field keeps the page quiet so copy stays legible.
→ Parity: tablet timings sit between desktop and mobile. Galleries keep desktop timings on tablet because they share the same Pro Gallery setup, only the layout differs.
4. Glitch, Blink, and Character Avatars
Hero → The desktop hero uses four glitch variants plus a brief eye blink. It reads as a signal flicker, not a jump scare moment. On mobile and tablet, this animation is reduced to two glitches plus the eye blink.
Other avatars → Start, Resume, and Contact use a lighter two-step glitch so they feel related to the hero without adding noise. The goal is to add personality while keeping the UI calm. Since the avatars are presented like holograms, the glitch effect suits the concept and reinforces that look.
Title → On desktop, the main title briefly flickers to symbols, numbers and random letters on hover. On mobile and tablet, a short auto-glitch runs occasionally so the interaction is still discoverable without hover. Combined with the avatar treatments, the title glitch supports the site’s sci-fi tone without overpowering the content.
5. Hover and Tap Rules
I kept the rules simple so you never have to guess what is interactive.
Text links and labels → Text that can be clicked shifts to the accent color (#5CABFF) on hover or tap, because color is the fastest cue to read.
Vector buttons and icons → quick shrink on hover or tap, then release.
Cards and thumbnails → gallery images zoom slightly on hover, and paired titles adopt the accent color so the card reads as one component.
Touch parity → anything that relied on hover now gives a small tap response, so mobile users always get clear confirmation.
▹ Navigation clarity :
On desktop, tablet, and mobile, the top-left page title doubles as a quick navigation label. On hover or tap, it shifts to the accent color (#5CABFF) and updates to show the destination, for example “Home,” “Main Gallery,” or “Blog Feed.” Activating it takes you straight to that section. This gives a fast route in addition to the bottom arrows and page buttons, and keeps the interface immersive without relying on the browser’s top navigation. On mobile, the label shows a light tap response before redirect, so the behavior is clear. Fixed navigation buttons remain for reach and comfort.
The blog keeps the same interaction style on cards, but inside posts I removed image zoom given Wix Studio blog limits. Reading comfort wins there.
6. Sound Design
I kept sound focused and functional. Three short UI sounds are used because each has a job: one click confirms forward actions, one click signals back or close, and a tiny blip pairs with tooltip hovers. Levels stay gentle by default.
I also tested a calm space track across Home, Start, Resume, and Contact with a small audio button. It technically “kept time” between pages by saving the playhead and resuming, but each navigation still introduced a tiny pause. The mix felt busy next to the UI clicks, and the vibe leaned more ambient than tech interface. The extra control added friction without enough payoff.
Decision: I removed the background music and kept only the three UI sounds. The site is quieter, snappier, and easier to read. If I revisit audio later: I’d either move to a single-page flow with the four pages for true music continuity or refine the existing UI sounds further. The current back sound already includes a soft whoosh, so it naturally bridges sections without the need for additional effects.
7. Accessibility notes
This site uses motion and sound to set the tone, but comfort comes first. I kept animations short, avoided blocking sequences, and set audio to a low volume by default. Hover cues translate to taps on mobile so feedback is predictable on touch.
▹ What is already in :
Clear color contrast and readable type across breakpoints.
44x44 px tap targets and visible interaction states.
Short, purpose-driven motion and gentle UI sounds.
Alt text on key visuals.
▹ What was deferred :
Reduced-motion toggle → I prototyped a global option, but cross-page timing created small glitches in Wix Studio. I shipped the stable version first and will re-implement the toggle cleanly in a future pass.
Stronger focus visuals and a skip to content shortcut → Planned for the next round to improve keyboard flow.
8. Keeping It Stable
The decorative motion was separated from interactive layers because hovers can fail when they share the same stacking context. I staggered groups with tiny delays instead of animating every child, since it reads cleaner and is easier to maintain. And anything that once relied on hover now shows a light tap response because touch users need the same certainty.
9. Outcome
The site feels playful and cinematic, but the interface stays in charge. You always get a clear response when you point, hover, or tap. The hero has character, the galleries feel interactive, and the UI sounds provide precise feedback without a backing track, which keeps the experience calm and focused. Even with platform limits, the system behaves consistently across desktop and mobile.
▹ Design Notes :
Motion supports reading order: world, content, controls.
Personality sits in the decorative layer, not the UI layer.
Feedback is standardized, learn it once, apply it everywhere
Audio is minimal, low-volume, and focused on feedback.
Accessibility: clear contrast, generous tap targets, short motion. Reduced-motion toggle and focus improvements queued for a future pass.
Continue reading the series: