One Becomes Two: A Scroll-Driven Story of DNA Replication
DNA replication can be hard to explain without turning it into a page full of labels. I wanted to make the process feel simple, visual, and alive.
One Becomes Two follows a single DNA molecule as it opens, uses each old strand as a guide, builds two new strands, seals the remaining gaps, and becomes two complete copies. The viewer moves through the story by scrolling, controlling the pace of each step.
I wrote the eight-part narrative, developed the black-and-white illustration system, designed the editorial layout, and built the animation in HTML, CSS, JavaScript, and SVG. A slowly rotating DNA molecule with subtle projector flicker introduces the piece. Inside the story, solid and outlined lines distinguish original DNA from newly made DNA.
The result is a scientific explanation that feels more like a short illustrated film than a textbook diagram.
A demo website created for a fictional dental clinic in Vikstrand. I developed a warm, appointment-focused experience with candid photography, subtle scroll motion, clear visit options, first-visit guidance, FAQs, and a straightforward booking flow.
1
274
Website for sport community
0
49
A demo website created for a fictional neighborhood restaurant and wine bar in Göteborg. I developed a rotating cinematic video hero and a minimalist, reservation-focused experience covering the story, seasonal menu, location, and booking flow.
2
286
A scrollytelling website demo project for a honey brand.