ResultsShowcaseV2 - “The Ascent”

Cinematic transformation visualization: From Seventh Seal brutalism to Moana vitality.

The Concept

This isn’t just data visualization—it’s an emotional journey from darkness to light, numbness to aliveness. As users scroll, they climb from basecamp to summit, watching the world transform around them.

The Journey

BASECAMP (Grey Zone) - Stuck, numb, grey brutalist aesthetic
IMPACT - Pre-dawn, mountains in darkness, first light breaking
CONNECTION - Sunrise, warmth entering, colors blooming
VITALITY - Full Moana spectrum, ocean vista, complete aliveness
SUMMIT - The view from the top, transformed

Key Differences from V1

V1: Clean, professional, safe V2: Cinematic, bold, experiential

Aspect	V1	V2
Visual	Progress bars	Rising light beams with background transformation
Typography	Cormorant + DM Sans	Futura Bold (Nike-style) + Libre Baskerville
Background	Solid white	Animated mountains & sunrise
Color Journey	Static blues/gold	Grey → Deep blue → Sunrise → Full spectrum
Feel	Polished report	Cinematic experience
Signature Moment	Bars filling	Sun cresting mountain at first 100%

Visual Design

Typography

Futura (or fallback) - All headings, numbers, UI
Libre Baskerville - Quotes and emotional content

Color Progression

Basecamp (Grey)

Sky: #1a1a1a → #3a3a3a
Mountains: Shades of grey
Text: Desaturated

Impact (Pre-dawn)

Sky: #0a1929 → #3d5a80 (deep navy blues)
Mountains: Dark blues emerging
Sun: First glow appearing (30% opacity)

Connection (Sunrise)

Sky: #3d5a80 → #f4a261 (warm dawn)
Mountains: Coral and blue mixing
Sun: Breaking horizon (80% opacity)

Vitality (Full Color)

Sky: #2a9d8f → #e76f51 (ocean to coral)
Mountains: Teal, coral, gold
Sun: Full radiance (100%)

Technical Features

Fixed background with parallax mountain layers
CSS clip-path for geometric mountain shapes
GSAP ScrollTrigger syncs animations to scroll position
Data-driven stage changes update entire scene
Counter animations for satisfying number reveals
Whisper quotes pulse in/out during bar fills
Responsive mountain shapes and typography

Installation

Same as V1:

npm install gsap

---
import ResultsShowcaseV2 from '../components/ResultsShowcaseV2.astro';
---

<ResultsShowcaseV2 />

Customization

Background Video Option

Want to use actual mountain/sunrise footage? Replace the CSS mountains:

<div class="background-scene">
  <video autoplay muted loop playsinline class="background-video">
    <source src="/videos/mountain-sunrise.mp4" type="video/mp4">
  </video>
  <div class="video-overlay"></div>
  <div class="sun-element"></div>
</div>

.background-video {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  mix-blend-mode: multiply;
}

Then control video playback speed/filter via JS based on scroll progress.

Real Client Photos

Replace avatar placeholders:

<div class="landing-photo">
  <img src="/images/clients/david-chen.jpg" alt="David Chen" />
</div>

.landing-photo img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

Adjust Mountain Shapes

Edit the clip-path values in .mountain-layer classes:

.mountain-near {
  clip-path: polygon(
    0 100%, 
    0 70%,     /* Start height */
    20% 40%,   /* First peak */
    35% 55%,   /* Valley */
    50% 30%,   /* Highest peak */
    65% 50%,   /* Valley */
    80% 35%,   /* Peak */
    100% 60%,  /* End height */
    100% 100%
  );
}

Animation Timing

Speed up/slow down the transformation:

// In script section
tl.to(bar, {
  width: '100%',
  duration: 2,  // Change this (currently 2 seconds)
  ease: 'power2.inOut',
});

Color Palette Swap

Want different colors? Update the [data-active-stage] CSS:

.results-ascent[data-active-stage="vitality"] .sky-gradient {
  background: linear-gradient(
    to bottom, 
    #YOUR_TOP_COLOR 0%, 
    #YOUR_MID_COLOR 50%, 
    #YOUR_BOTTOM_COLOR 100%
  );
}

Performance Notes

Mountains are pure CSS (no images)
Fixed positioning prevents repaints
GSAP uses GPU-accelerated transforms
Smooth 60fps on modern devices
Falls back gracefully on older browsers

Browser Support

Chrome/Edge 88+
Firefox 87+
Safari 14+
Mobile Safari 14+

Requires:

CSS clip-path
CSS custom properties
IntersectionObserver

When to Use V1 vs V2

Use V1 when:

You want professional/corporate aesthetic
Faster load times are critical
Audience prefers data-forward presentation
You’re testing messaging first

Use V2 when:

You want to create an experience
Your brand is bold and distinctive
You have the content to support it (photos, videos)
You’re targeting transformation-seeking clients
You want people to feel the journey, not just see data

The Signature Moment

When the first metric hits 100%, the sun crests the mountain and everything shifts from grey to color. This is the “holy shit” moment. Time it perfectly with your hero testimonial for maximum impact.

Tips

First load? Scroll slowly to see the full transformation
Want more drama? Increase the .sun-element size on vitality stage
Too intense? Reduce opacity on color transitions
Testing? Add ?stage=vitality to URL and jump to that state instantly
Mobile? Mountains still work, just slightly simplified

What Makes This World-Class

Unique visual metaphor (ascent/sunrise) matched to transformation narrative
Emotional progression from numb to alive mirrors the data
Futura typography gives Nike-level confidence
Signature moment people will remember and screenshot
Cinematic scope elevates coaching data to aspirational experience

V2 isn’t just showing results—it’s creating the feeling of transformation.

Questions? The component has extensive comments. The magic is in how the background responds to scroll progress and stage changes.