Build in Public

Recreating Apple's iCloud Animation

A journey into 3D web animations, building and learning in public

Started Nov 2025
•In Progress

Why This Project?

Apple's hero animations are legendary for their smoothness and polish. As a designer who codes, I wanted to understand the technical craft behind these experiences. This project is about learning by doing—breaking down complex animations into understandable pieces.

I'm building this in public to share my process, mistakes, and learnings. It's meta, but that's the point—showing the messy middle, not just the polished end result.

Milestone 1 ✓

Initial Implementation

Getting the hero animation on my site

First milestone - hero animation implementation

What I Did

  • •Created an admin page for easy file uploads
  • •Integrated the animation video into the hero section
  • •Set up the foundation with proper sizing and positioning

What I Learned

Starting with a video was the smart move—it let me see the animation in action before diving into the complex 3D implementation. This quick win built momentum and helped me understand the timing and feel I'm aiming for.

Milestone 2 ✓

Crafting Custom Emojis

Creating personalized 3D elements in Apple's style

Custom emojis created in Weavy AI

What I Did

  • •Used Weavy AI to create each emoji individually, referencing Apple's iconic emoji style
  • •Designed emojis representing my interests: coding, coffee, van life, music, fashion, and more
  • •Composed them in a circular layout around my memoji avatar

What I Learned

Creating assets in Apple's style is harder than it looks. Each emoji needed multiple iterations to get the lighting, shadows, and materials just right. The challenge now is translating these static images into interactive 3D elements that can float and rotate smoothly.

Next Steps

3

Set up Three.js Scene

Create the basic 3D scene with camera and lighting

4

Convert Emojis to 3D

Transform the static emoji images into 3D objects with depth and materials

5

Add Scroll Animations

Wire up scroll events to control the 3D rotation and movement

6

Polish & Optimize

Fine-tune performance, add easing, and perfect the details

This page will be updated as I make progress. Follow along for the journey!