Alas Stories WebAR Platform
Alas Stories is the interactive augmented reality platform that brings Alas Artistry memorial tributes to life. Built using WebGL and Three.js, it operates directly inside standard mobile browsers (Safari, Chrome) without requiring users to download a standalone app.
1. Interaction Pipeline & User Journey
┌─────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ 1. Native Camera│ ──> │ 2. WebAR Viewer │ ──> │ 3. Sequence 1 │
│ Scans Plaque QR │ │ Launches Safari/ │ │ "Awakening" │
│ │ │ Chrome WebGL │ │ Iridescent Morpho│
└─────────────────┘ └──────────────────┘ └──────────────────┘
│
▼
┌─────────────────┐ ┌──────────────────┐ ┌──────────────────┐
│ 6. Sequence 2 │ <── │ 5. Audio Eulogy │ <── │ 4. Memory Media │
│ "Release" Outro │ │ Plays in Sync │ │ Chapters Unfold │
│ Butterflies Rise│ │ with Transitions │ │ (Photos/Quotes) │
└─────────────────┘ └──────────────────┘ └──────────────────┘
2. 3D Animation Architecture & The Five Sequences
Animations are rendered in real time over the mobile camera feed, interacting with the real-world boundaries of the physical shadow box:
Sequence 1: Awakening (Intro)
- Duration: 5–6 seconds
- Trigger: AR experience initializes upon camera recognition of the tribute plate.
- Motion: A single Morpho peleides emerges from the physical artwork with closed wings. As wings unfurl to reveal vibrant electric blue scales, 4 to 6 gold butterflies spiral inward, releasing a gentle ring of warm light particles.
- Emotional Intent: Stillness transitioning into radiant remembrance; welcoming the family into the memorial space.
Sequence 2: Release (Outro)
- Duration: 5–7 seconds
- Trigger: Final memory chapter or photo album reaches completion.
- Motion: Multiple butterflies (Gold Swallowtail, Painted Lady, Monarch) ascend softly in formation, gradually dissolving into drifting gold particles that rise off-screen. The final Blue Morpho holds position, gently closes its wings, and fades into peace.
- Emotional Intent: Gentle release, peaceful closure, and lasting love.
Sequence 3: Flutter Through (Transition A)
- Duration: 3–4 seconds
- Trigger: User advances between photo or text cards.
- Motion: Two butterflies cross the screen in an asymmetric figure-eight arc, sweeping the current memory card aside with a soft particle wake.
Sequence 4: Perch & Bloom (Transition B)
- Duration: 4–5 seconds
- Trigger: Pausing on a featured eulogy or highlighted memory quote.
- Motion: A butterfly lands gently on the corner of the media frame, resting its wings with micro-flutters while subtle ambient light illuminates the text.
Sequence 5: Constellation Flight (Ambient Idle)
- Duration: Continuous loop (subtle 30-second cycle)
- Trigger: Background state while audio tribute plays.
- Motion: Distant glowing light motes and slow gliding butterfly silhouettes orbiting the frame periphery without distracting from foreground memories.
4. Technical PRD & Customer Journey Artifacts
The formal Product Requirements Document (PRD) and Phase 2 Customer Journey Maps are embedded below for direct engineering reference and executive review.
To maintain fluid 60fps rendering across mid-range and premium smartphones:
| Parameter | Threshold | Optimization Strategy |
|---|---|---|
| Max Draw Calls | < 50 | Mesh merging and shared material atlases |
| Max Scene Polycount | < 80,000 triangles | Low-poly butterfly armatures with baked 4K normal maps |
| Texture Memory | < 20MB uncompressed | KTX2 / Basis Universal texture compression |
| GLB File Size | < 2MB per sequence | Embedded glTF 2.0 animations with Draco mesh compression |
| Lighting Environment | Ambient + Directional | Lightweight custom PBR shaders mimicking subsurface wing translucency |
| Alpha Blending | 100% Transparent Canvas | Canvas background transparent to blend over live camera video feed |