All work

Playground / Interactive Video Learning

A paid course platform where lessons alternated between video and interactive programs. It shipped three course series. Its flagship machine-learning course took the site down on launch day.

Steam capsule artwork for The Birth of an AI: a golden neural structure forming a human profile

Capsule artwork for the flagship course, The Birth of an AI.

Role

Core business logic and API design; JavaScript-to-TypeScript migration; performance and memory; interaction nodes and motion design; internal animation tooling

Team

Dehydration Culture, interactive video team. The platform was a team build; see My role.

Timeline

Platform launched December 2019. Joined 2020, left 2022. Future development halted December 2021.

Outcome

3 course series shipped. ¥49 flagship course with a launch-day outage. Player framework later open-sourced as Recative.

01 · The product

What the platform was

Playground launched in December 2019 as a paid platform for interactive video courses. In each lesson, video segments and interactive programs alternate: the video explains an idea, and the program lets the learner operate on it. The courses were made for a Chinese-speaking audience, so the screenshots on this page show the original interface. I joined the team in 2020 and worked on the platform until 2022.

Three course series shipped on the platform:

Course map of The Birth of an AI: twelve chapters from recognizing digits to building a neural network

The Birth of an AI

Released December 2020

Twelve chapters, from recognizing handwritten digits to training a neural network. Two years in development. Priced at ¥49 with a one-yuan trial chapter. Later released on Steam.

Flagship course · 12 chapters
Cypherpunk Essentials cover: an Enigma machine sketched on paper

Cypherpunk Essentials

Cryptography course

Cryptography taught through interactive cipher machines, from classical ciphers to modern encryption. Later released on Steam.

Steam release
Statistics: Save the World early-access cover, episode 1

Statistics: Save the World

Early access

Statistical inference taught as an interactive story. Released as an early-access episode. As development wound down, a scaled-down complete version was later given free to existing paying users. The cover states the course’s stance: do not trust intuition, and do not stop thinking.

Early access · Episode 1

02 · The thinking

Why interactive video

The audience was people who want to learn through video without staying passive: they want to participate, to practice, and to progress along a smooth learning curve.

Interactivity had two jobs. Tasks and puzzles inside the lesson deepen comprehension. Conversational UI and real-time data collection show how the learner is progressing while the lesson runs.

Content-production tools can be mapped on two axes, complexity and user engagement. Slide tools sit low on both, game engines sit high on both. Interactive video sits in the empty middle: higher engagement than slides, lower production complexity than game-engine content.

03 · The craft

Engineering decisions behind the experience

Each of these three decisions began as a flaw that users could see. The full technical history is on the blog, from 2022 and in Chinese.

a

The cut from video to interaction

Early lessons switched from video to interaction through a visible modal window. The rebuilt player uses the video’s last frame as the first scene of the interaction, with the same audio continuing underneath. The cut is hard to notice even when you know where it is. My boss did not notice it the first time he watched.

b

Loading that feels shorter than it is

Preloading every video at once crashed AMD graphics drivers and left users with a black screen. The fix was a rework of the loading lifecycle plus a resource manager with priority tags. Where waiting could not be removed, it was filled: the player detects the GPU, then plays a three-part WebGL animation while assets load. Later changelogs describe the result in product terms: users saw a loading indicator less often during playback.

c

A frame rate that adapts

Mobile support came late, and the first mobile builds ran hot. A colleague joked that the phone ran hotter than Genshin Impact. The fix was a frame-rate request system behind one interface: 60 frames per second while something moves, 15 when idle, back to 60 the moment the user interacts. The overheating reports stopped.

04 · The interactions

Selected interactions

From The Birth of an AI. The team worked from static visual designs; turning them into working interactive programs, and designing the motion inside them, was engineer work. Every course was a team production. Screenshots show the shipped Mandarin interface.

A digit being recognized by a network mid-training, with input, weights and output shown as labeled blocks
Watching a neural network train. A digit recognizer training live: sample 57 of 12,388, iteration 14, with input, weights and output exposed while it runs.
A loss curve with a descent in progress, a learning-rate slider set to 0.5, and a row of remaining attempts
Gradient descent. Learners set the learning rate and watch each step play out on the loss curve, within a limited number of attempts. The curve data was prepared in R before any interface code was written, so the drawing and the underlying mathematics come from the same hands.
A three-dimensional function plot beside a node editor composing t equals sine of x and its derivative
Composing formulas with the chain rule. Learners chain functions together and each composition appears as a node next to its derivative, with a three-dimensional view of what the chain rule describes.
A cat photo beside two code windows comparing one matrix operation against a ten-million-step loop
Why matrices run faster. The same recognition task written twice: one matrix operation against a ten-million-step loop. The speedup from parallel computation is measured on screen, not asserted.
A handwritten character convolved by a selectable kernel, with edge-detection presets and a custom option
How a convolution kernel works. Learners pick an edge-detection kernel or design their own, and watch it sweep across the image region by region.
Feature maps of a small convolutional network updating live during training, accuracy at 23.81 percent
A convolutional network on the device. A small network training entirely in the browser, feature maps updating in real time at full frame rate, with no server involved.

05 · Reception

Launch and reception

2020-12-17

The Birth of an AI launches. Launch-day traffic takes the site down; the team tells users that engineers are fixing it around the clock.

¥49 / ¥1

Full course price, with a one-yuan trial chapter. A retail partnership with Digital Lychee followed in March 2021.

¥500,000+

Revenue by the end of launch month.

2 years

Development time of the flagship course.

Retail banner for The Birth of an AI on the Digital Lychee store, priced at 49 yuan
Retail banner on the Digital Lychee store, 2021. Archival image, original branding.

Coverage included The Paper, Tencent News, 36Kr and Appinn. A sixteen-minute excerpt circulated on Bilibili, and a public evaluation thread on Zhihu collected both praise and detailed criticism. Both completed courses were later released on Steam. Official update posts thanked beta testers by name, and tester feedback shaped each content update.

06 · User response

What users said

The course was reviewed publicly, including a long evaluation thread on Zhihu. The feedback reached the team and shaped later updates.

Praise

  • Reviewers repeatedly singled out the data visualization. One viewer described watching with headphones as tingling and very cyberpunk.
  • The gradient-descent episode became the course’s signature memory. Players counted how many times they had walked the mountain.
  • Educators and engineers published long-form analyses of how the course makes gradient descent and convolution tangible.

Criticism

  • Interaction points that were hard to discover without guidance.
  • Stutter when zooming and panning the larger scenes.
  • The learning cost of the more mathematical chapters, especially for self-taught learners.

07 · My role

My role on the team

Core business logic and core API design for the interactive video system
JavaScript-to-TypeScript migration of the codebase
Performance and memory: data generation and fetch models that kept machine-learning demos at full frame rate
Engineering standards and best practices for interactive-program development
Interaction nodes and motion design for course episodes
Internal tooling: an online texture-conversion tool used by WebGL developers outside the team, and animation tooling for designers

The platform was a team build: I set the architecture, built the business logic that crossed teams, and did some interface and product design; most of the development was done by colleagues. The night the largest architecture change shipped, the main user flow had zero bugs. It was the first time in my two years there.

About this page

  • · Playground halted future development on December 31, 2021. The screenshots and artwork on this page show the product as it shipped.