React For Vikings
summary
Build for the History Channel site "Vikings – A World Revealed" uses React plus Redux, react-router, react-transition-group and a homegrown animation stack (f1 / react f1, f1 DOM) with parts in WebGL, and delivers animation‑heavy, responsive pages where designers edit react f1 states and transitions files directly. The claim: complex, orchestrated UI comes from declarative state files; the implementation works but exposes a performance pitfall — animating styles via React props kills FPS, switching to direct DOM updates restores smooth scrolling. WebGL wrapped with React provides the heavy lifting.
AI-written summary · about
chapters (21)
- 0:00Intro
- 0:49About Mikko
- 1:57About Jam3
- 4:12About the site
- 4:59Content pages
- 6:56Why React
- 8:35React Components
- 11:16Pathfinding
- 14:10Separation of Concerns
- 15:02Design Inspiration
- 16:26State
- 17:03Scale
- 19:59Transitions
- 22:21Animations
- 24:10Components
- 28:59NPM
- 30:46Chief
- 31:28Chief Components
- 34:21React Motion
- 35:39React Motion Performance
- 40:51Questions
related talks
18mReact and WebGL
34mI Heard React Was Good
51mFunctional Web Development – An Introduction to React.js
31mAnimating the Virtual DOM
01h 04mWhat makes React different?
36mBlasting React into Space: Building fluid interface swith React and WebGL
32mBringing webgl to react
27mReact: Learn Once Write Anywhere