How I built a scroll-driven cinematic portfolio in Flutter Web

#flutter #showdev #tutorial #webdev

When I decided to rebuild my portfolio, I wanted something that felt less like a website and more like a film. The idea: scrolling forward plays the Big Bang origin story of the universe. Scrolling backward rewinds it — literally, frame by frame.

The obvious Flutter approach is AnimationController. I tried it. It falls apart immediately: you can't drive an AnimationController backward with scroll without hacking around its internal state, and the moment you want a dozen independent effects — star fields, particle bursts, planet orbits, text assembly — you end up with a dozen controllers that need to stay synchronized. It becomes a timeline problem, not a Flutter problem.

I threw away the controllers and replaced everything with a single number.

The core idea: one t, pure functions everywhere
Every animation on the site is a pure function of a single scroll-time value t ∈ [0, 1]. t = 0 is the very beginning. t = 1 is the end. Every star position, every particle alpha, every planet orbit angle — all of it is computed from t and nothing else. This means rewinding is free: you just decrease t, and everything runs backward automatically.

The site is structured into seven eras, each owning a slice of the timeline:

enum Era {
  singularity('The Singularity',    0.00, 0.05),
  bigBang    ('The Big Bang',       0.05, 0.15),
  stellar    ('Stellar Formation',  0.15, 0.35),
  planetary  ('Planetary Accretion',0.35, 0.65),
  civilizations('Age of Civilizations', 0.65, 0.85),
  present    ('The Present Moment', 0.85, 0.95),
  newUniverse('A New Universe',     0.95, 1.00);

  const Era(this.label, this.start, this.end);
  final String label;
  final double start;
  final double end;

  // Progress through this era, clamped to [0, 1].
  double progress(double t) => ((t - start) / span).clamp(0.0, 1.0);
}

Any system that needs to animate within its era calls Era.bigBang.progress(t) and gets back a 0..1 value local to that era. The star field, the burst particles, the text assembly — they all just interpolate against this number.

Converting scroll offset into cinematic motion
UniverseClock owns the ScrollController, reads scroll offset, and exposes a smoothed t:

class UniverseClock extends ValueNotifier<double> {
  static const double pages = 18.0; // total scroll runway
  double chaseRate = 6.0;
  final ScrollController scrollController = ScrollController();
  double _target = 0.0;

  void _readScroll() {
    final position = scrollController.position;
    if (position.maxScrollExtent <= 0) return;
    _target = (position.pixels / position.maxScrollExtent).clamp(0.0, 1.0);
  }

  void tick(double dt) {
    final double gap = _target - value;
    if (gap.abs() < 0.00005) { value = _target; return; }
    value += gap * (1 - math.exp(-chaseRate * dt));
  }
}

The key line is the exponential chase:

value += gap * (1 - math.exp(-chaseRate * dt));
This is frame-rate-independent exponential smoothing. Each frame, t covers a fixed fraction of the remaining distance rather than a fixed amount. The result: large gaps produce fast motion, small gaps decelerate naturally. A mouse-wheel tick — which fires as a discrete step — reads as one smooth cinematic glide. The math guarantees identical behavior at 30fps and 120fps.

Under reduced motion, I raise chaseRate from 6 to 18, so content snaps to position instead of gliding.

The simulation tick
A Ticker (owned by UniverseSimulation) fires every frame and calls clock.tick(dt) first, then updates every subsystem with the new t:

void _onTick(Duration elapsed) {
  final double dt = (elapsed - _lastTick).inMicroseconds / 1e6;
  _lastTick = elapsed;
  clock.tick(dt);
  final double t = clock.value;

  // Every subsystem reads t and updates its own state.
  field?.updateInto(rstTransforms, spriteColors, t: t, ...);
  burst?.updateInto(burstRst, burstColors, t: t, ...);
  planets?.update(dt: dt, t: t, ...);

  notifyListeners(); // painter redraws
}

There is no scheduler, no setState, no rebuild loop. One ticker drives the whole universe.

The idle gate
Running a full physics tick at 60fps when the user isn't scrolling and nothing is animating is wasteful. I added a simple gate:

final bool clockMoved = t != _lastTickT;
final bool oneShots = eggBlend > 0 || (time - contactBurstStart) < 1.6;
final bool live = !rm || clockMoved || oneShots || _settleFrames > 0;
if (!live) return;

Under reduced motion, the simulation only wakes up when scroll is moving or a one-shot effect is playing. _settleFrames gives spring physics and hover effects time to finish before the gate closes. The result: the site draws zero GPU time when the user is just reading.

The rewind trick costs nothing
Because every position is a pure function of t, there is genuinely zero special-case code for rewinding. The Big Bang explosion runs backward, particles re-assemble into a name, the star field retreats — all because t is decreasing. The burst field:

// In BurstField.updateInto():
final double p = Era.bigBang.progress(t); // decreasing as user scrolls up
final double decel = 1 - math.pow(1 - p, 2.4);
final double x = center.dx + _dirX[i] * _speed[i] * maxR * decel;

As p decreases, decel decreases, particles contract back toward the origin. Free.

What I'd do differently
The one limitation of this model is timeline editing. If you decide a section needs more "screen time" you have to re-tune every era's start/end values and recheck all the per-era progress() thresholds. A keyframe system that decouples logical time from scroll position would help — but for a single-page portfolio, the simplicity of the current approach is worth the tradeoff.

Check the website