Stranger Things Characters Imprint

• 

  Logo

• 

  Playing Screen

• 

  Scan Completed

• 

  Final Screen

• 

  Poster

The Inspiration

The project was inspired by the hype surrounding the final season of *Stranger Things.
I wanted to create a **Character Roulette* that felt more tactile and high-stakes than a simple randomizer. Instead of just tapping a button, the goal was to make users feel like they were being “probed” by a biometric system—bridging 1980s sci-fi aesthetics with modern AR technology.

Building the Experience

The Lens is built around a Biometric Imprint System.
I developed a custom script that manages the transition between three distinct states:

• Idle: Prompting the user to interact.
  
• Scanning: A loop handling real-time visual feedback, including a pulsing respiratory animation and a rotating holographic fingerprint.
  
• Reveal: A randomized selection logic that triggers a typewriter effect for the character’s title and description.

The Technical Logic

To create the feeling of a “living” scan, I implemented a time-based pulsing logic for the UI elements.
The alpha transparency $(\alpha)$ and scale $(S)$ of the fingerprint are calculated using sine waves relative to runtime:

$$ \alpha = 0.5 + \sin(Time \cdot 2.5) \cdot 0.3 $$

$$ S = 1 + \sin(Time \cdot 4) \cdot 0.02 $$

This creates a heartbeat-like effect, increasing tension while the script cycles through character textures at high speed to simulate a digital search.

Challenges Faced

The biggest hurdle was UX Timing.
If the scan is too short, it feels cheap; if it’s too long, users lose interest. I introduced a scanTime variable to fine-tune the sweet spot at 2.0 seconds.

Another challenge was array syncing. With 22 different results (ranging from Eleven to the Grandfather Clock), ensuring images, names, and descriptions always matched required a strict index-matching system within the selectedIndex logic.

What I Learned

• Interactive Feedback: Using TouchStart and TouchEnd events to create a Hold-to-Scan mechanic that feels far more engaging than a simple tap.
• Typewriter Logic: Leveraging UpdateEvents to reveal text character-by-character, adding a cinematic computer terminal feel.
• Dynamic UI: Managing Screen Transforms and local rotations to keep UI elements stable even while being animated through code.

Built With

• api
• javascript
• tween