In this tutorial, you will build a sophisticated animated wallpaper featuring five nested, rotating squares that react to your device’s state (Locked, Unlock, and Sleep).
What You’ll Create
You will build a “Recursive Orbit” wallpaper:
- 5 Nested Squares: Different sizes and colors.
- Continuous Rotation: Each square spins at its own offset.
- Dynamic States: The squares scale up when unlocked and slide to the top during sleep.
Step 1: Project Setup
- Open CAPlayground.
- Click New Project and name it “Recursive Orbit”.
- Choose your device’s screen size (e.g., iPhone 15 Pro).
Step 2: Set the Background
Modern wallpapers often use a solid background to let the animations pop.
- In the Layers Panel (left), select the Background CA from the dropdown next to the project name.
- Click + Add Layer → Basic Layer.
- In the Inspector > Geometry tab, set the size to match your canvas (e.g.,
Width: 390, Height: 844).
- In the Inspector > Content tab, set the Background Color to black (
#000000).
Step 3: Create the Nested Squares
Switch back to the Floating CA (where your interactive art lives) by using the dropdown next to the project name.
Create 5 Basic Layers with the following properties:
| Name | Size (W/H) | Color | Corner Radius |
|---|
| Shape 1 | 250 | Red (#FF0000) | 50 |
| Shape 2 | 200 | Orange-Red (#FF4000) | 40 |
| Shape 3 | 150 | Orange (#FF8000) | 30 |
| Shape 4 | 100 | Gold (#FFC000) | 20 |
| Shape 5 | 50 | Yellow (#FFFF00) | 10 |
Position X: 195, Position Y: 422.
Step 4: Add the Rotation Animation
We want each square to rotate continuously. Repeat these steps for each of the 5 layers:
- Select the layer.
- Go to the Animations tab in the Inspector.
- Toggle Enable animation to ON.
- Set Key Path to
transform.rotation.z.
- Set Duration (s) to
1.
- Set Loop Infinitely to ON.
- Add two Key Values using the table below as your first value (the second value should always be
0):
| Layer | Start Value (Degrees) | End Value |
|---|
| Shape 1 | 90° | 0° |
| Shape 2 | 180° | 0° |
| Shape 3 | 270° | 0° |
| Shape 4 | 360° | 0° |
| Shape 5 | 450° | 0° |
Setting different start values ensures the squares are offset from each other as they spin!
Now, let’s make the wallpaper dynamic based on what you are doing with your phone.
1. The Unlock State (Slight Scale Up)
- In the States Panel (bottom-left), select Unlock.
- For each square, increase its size by 20% (e.g., Change Shape 1 from
250 to 300).
2. The Sleep State (Top Slide)
- Select the Sleep state in the States Panel.
- Move all 5 squares toward the top of the screen.
- Set their Position Y values in a sequence (e.g.,
125, 150, 175, 200, 225).
Step 6: Preview and Export
- Click the Phone Icon in the bottom-left of the canvas to enter Device Preview.
- Swipe up and down to see the squares scale and slide.
- Click the side button to test the Sleep state.
- If everything looks good, click Export and download the .tendies file.
