CASE STUDY: "White Bear" — A 15-Second Scroll-Based Narrative Experience
Projects
About
Designs
Contact
Take a Peek ->
Project Overview
This project is a conceptual reinterpretation of the Black Mirror episode "White Bear" condensed into a 15-second scroll-based website. Using HTML, CSS, JavaScript, and Lottie animations, I translated the episode’s core themes memory loss, surveillance, punishment, and media spectacle into an abstract, symbolic, and emotionally driven user experience. The aim was to compress a layered narrative into a short but powerful interactive journey that challenges the user to reflect on justice, empathy, and content consumption.
Response to the Brief
The brief required telling a story without using any unique or copyrighted content, which inspired a creative pivot toward symbolism, abstraction, and scroll triggered interaction. White Bear inherently explores loops, media ethics, and cognitive disorientation making it ideal for a short form digital narrative. The challenge of compressing a complex storyline into 15 seconds became a strength, aligning with the episode’s critique of modern media consumption.
Why “White Bear”?
I chose White Bear due to its emotional impact and ethical complexity. The story’s themes of public punishment, memory manipulation, and spectacle allowed me to craft a metaphor driven journey without relying on any original footage or dialogues. The looped punishment structure directly influenced the scroll-reset mechanism at the end of the site, enhancing thematic depth and narrative immersion.
Visual Development & Iteration
Wireframes & Sketches: Created in Figma and hand-drawn to explore narrative pacing and visual language.
Feedback: Initial version used p5.js for the bear scene. Based on peer feedback, replaced it with a more controlled Lottie scroll-based animation to improve performance and clarity.
Final Outcome: Website Walkthrough
The website offers an emotionally charged, 15-second symbolic journey:
Disorientation: 404 glitch, floating pills
Surveillance & Running: No agency, constant recording
Theatre of Punishment: Red curtain opens, identity revealed
Crime Realization: Bear, fire, child’s drawing
Shame & Spectacle: Eye, paint, TV, remote
Reality Check: Park ticket rules
Loop Reset: Scrolls to top cycle restarts
Every scroll, animation, and symbol contributes to a tightly compressed narrative forcing users to consider how media shapes perception, punishment, and empathy.
Reflection
This project sharpened my skills in
Narrative abstraction
Scroll-based UX design
Symbolic motion graphics
HTML/CSS/JS + Lottie integration
By merging design thinking with technical precision, I crafted an experience that transforms a known story into a universal metaphor for justice and media ethics.
Research and Development
To understand how to convey deep narratives briefly, I researched:
Symbolic storytelling
Scroll-based interactive design
Hyper-short film formats
Motion design in UX
These informed both visual metaphors and user interactions to create a meaningful emotional flow in a short duration.
Metaphor Mapping
Early sketches and storyboards mapped specific symbols to narrative beats:
404 Glitch = Memory loss
Floating Pills = Mental confusion
Camera Frame = Surveillance
Fire = Murder
Eye = Regret
TV & Paint = Media spectacle
Loop = Repetition and punishment cycle
Each symbol was animated and aligned with scroll position for emotional pacing.
Technical Execution
HTML/CSS/JavaScript (Core site structure and interactions)
Lottie (Scroll-based animations)
GSAP (Scroll effects and transitions)
Figma & Illustrator (Asset design)
After Effects via LottieFiles (Motion design export)
Lottie Animations: Process
Animation 1: Running Woman & Wall
Character drawn in parts in Illustrator, imported to Lottie.
Keyframes applied to simulate natural running.
Wall crashes into view → pieces form a tattoo shape.
Animation 2: Bear, Fire, and Child
Bear assembles with position keyframes.
Fire rises using color and gradient transitions.
Child drawing fades in, child figure fades out — evoking loss and regret.
Animation 3: Eye, Paint, Remote
Eye tears, paint splashes animate on scroll.
TV screen appears; remote control loops scenes.
Timed object layers guide viewer through realization.
Advanced Scroll Effects
GSAP Camera Flash: A flash animation bridges two emotional scenes.
Curtain Reveal: CSS-based curtain opens as user scrolls to reveal “truth.”
Film Strip Transition: Between sections, GSAP animates film reels and static for media commentary.
Auto Scroll Loop: Scroll triggers auto-reset to the top — metaphor for endless punishment cycle.
Key Sections & Symbolism
1. Glitch Screen & Floating Pills
Opens with a 404 “Memory Not Found” screen symbolizing a memory wipe.
Floating pills animated via CSS suggest disorientation and confusion.
No navigation disorienting by design.
2. Flash Reveal Transition
Circular flash triggered by scroll using GSAP.
Symbolizes traumatic memory flashes or resets.
3. Surveillance & Running Woman
Scroll-triggered Lottie animation of a woman running within a camera frame.
Represents helplessness and being watched.
A crashing wall ends the section, leading into her identity (tattoo) being revealed.
4. Red Curtain Reveal
Symbolizes theatrical exposure and loss of privacy.
Transition to a stage like reality everything is part of a performance.
5. Bear, Fire & Child Drawing
Bear assembles → Fire rises → Child drawing fades → Child disappears.
Symbolizes the emotional core of the crime.
Transition from confusion to ethical realization.
6. Eye, Paint & Public Shame
Realistic eye cries, paint splashes represent judgment and public spectacle.
Scroll triggers paint layers, building to full screen coverage.
Represents societal punishment through shame.
7. TV Screen & Remote
Scene zooms out to show a TV. Remote changes channels each showing past scenes.
Highlights repetitive punishment and mass spectatorship.
8. Park Rules Ticket
Final section shows a park ticket with 3 rules referencing White Bear Justice Park.
Reveals that this punishment is a packaged, commercialized experience.
9. Loop Reset
JavaScript scroll listener scrolls user back to the top.
A symbolic and functional metaphor for Victoria’s daily memory reset.
