Deterministic timeline
Explicit functions calculate each scene from progress, so forward and reverse movement produce predictable states.
Elgin, Illinois Cinematic Experience
A scroll-driven editorial portrait of downtown Elgin, the Fox River, local architecture, public space, and cultural life—designed as a reversible, responsive experience rather than a conventional information page.
The opportunity
Make a place feel navigable, not merely described.
A list of landmarks can communicate facts without conveying how a city’s river, streets, buildings, public spaces, and cultural life relate. The design challenge was to turn place-based source material into a coherent digital journey.
What Christian needed to solve
Build an expressive experience that remained deterministic, reversible, readable across screen sizes, and usable when motion is reduced or a visitor navigates without a mouse.
What Christian designed
One stage, orchestrated through time.
A sticky visual stage translates scroll progress into explicit scene states. Narrative panels enter, hold, and exit at defined points; camera framing and image treatment respond to the same timeline; and the final feature rail opens six sourced views into Elgin.
How it works
Pure scene calculations turn bounded progress into repeatable opacity, scale, position, tint, blur, and brightness values. Moving backward restores prior states instead of leaving the interface in an uncertain condition.
Contribution
Christian’s role
Christian set the product direction, selected the narrative and interaction goals, directed AI-assisted implementation, reviewed scene behavior and responsive framing, and validated the final local experience and static review package.
AI and tools
Implementation support
AI-assisted development supported component and styling drafts, timeline implementation, test scaffolding, QA analysis, and packaging. Christian retained authority over scope, source selection, design decisions, revisions, and acceptance.
Design and technical decisions
Motion serves orientation.
Responsive reframing
Desktop, laptop, tablet, and mobile compositions preserve narrative hierarchy without horizontal overflow.
Accessible exploration
The feature rail supports visible controls, Arrow-key navigation, pointer drag, focus retention, and live-region updates.
Reduced motion
A dedicated reduced-motion presentation removes the long cinematic scroll while retaining the content and exploration path.
Evidence and validation
Validated as an unpublished review experience.
These checks establish implementation behavior—not public adoption, official endorsement, or business impact.
5 sizesdesktop through mobile reviewed
2/2rendered HTML tests passed
0horizontal overflow at reviewed sizes
Localstatic review package; not published
Production build, TypeScript, lint, deterministic timeline checkpoints, reverse progress, keyboard interaction, pointer drag, assets-ready state, and reduced-motion behavior passed in the recorded validation.
Technologies, by purpose
- Experience: React, TypeScript, HTML, and CSS
- Scene system: deterministic timeline calculations and requestAnimationFrame updates
- Interaction: semantic controls, keyboard events, pointer capture, and live regions
- Validation: production build, TypeScript, ESLint, rendered HTML tests, and browser review
Known limitations
The experience is an unpublished local project, not an official City of Elgin product. Its six views are curated rather than comprehensive. Browser review is bounded and is not formal accessibility certification.
What Christian learned
Place-based storytelling becomes easier to follow when motion, narrative, source links, and exploration share one explicit state model.
What could improve next
Add a broader assistive-technology review and test whether a lighter asset strategy can preserve the same art direction on slower devices.