Sharing a neat trick for making fun animations on websites. Yesterday I shared the hero-screen animation effect from the site https://oiloil.org — the little character’s eyes and the puppy’s head on the hero screen follow my mouse movement, and they look quite smooth.

You can probably figure out how the character’s eyes were done: first generate a character image without eyeballs, then draw an eye in code and make it follow the mouse.

But the puppy might leave you guessing. My approach here wasn’t 3D modeling — it’s done through image swapping. My initial idea was also AI image generation, like CodeX’s built-in pet feature: generate a single multi-frame image, then extract and slice the frames, and switch between them in the UI based on the mouse position. But AI image generation gave too few frames — not smooth at all. Even if I added more frames using reference images, the puppy’s consistency couldn’t match the strength of generating everything in a single image.

So I thought of using AI video generation to produce a video with strong consistency, coherence, and a high frame rate. Here I used the Minimax H3 model. The overall implementation process is as follows:

1. MiniMax H3 generates a green-background video at 24 FPS, about 5 seconds, 124 frames.
2. Cut out frames facing different directions from the video, then interpolate them into 240 directional frames.
3. Merge the 240 frames into a single 16 × 15 WebP sprite sheet.
4. Based on the angle of the mouse relative to the puppy, calculate which frame of the sprite sheet to display.
5. Add inertia, maximum head-turn speed, and deceleration to the frame index in code.
6. The browser only changes background-position — no video playback, and no loading 240 images at once.

This approach can actually be used to create many fun effects, for example: dragging a progress bar to control a product expanding, disassembling, assembling, melting, or growing. Or map video frames to page scrolling, creating the kind of cinematic shot that can play forward, in reverse, or stop at any time — like on Apple’s site.

I’m even wondering: if each frame of an AI-generated video can be unique, then generating one video is like generating hundreds of images — which, when you do the math, might be cheaper than generating images.

Hope this idea brings you some inspiration ~

Oil® — 欧呦

Source: https://www.oiloil.org/ Hover

When you move your mouse over it, the button changes color so you know it’s clickable.

Hover meLift + color changeControl groupI don’t respond

Move your mouse over each one to feel the difference between “clickable” and “not clickable”

Spring Motion

When the popup appears, it gives a slight bounce, swaying gently like a spring.

It goes past the target value, then bounces back: overshoot

Click the track or “Replay” to watch the bounce again

Frosted Glass / Backdrop Blur Look

The nav bar is semi-transparent, so the content scrolling behind it looks blurry.

Mountain Homestay · Cloudtopbackdrop-filter: blur(10px)

Click the switch in the top-right corner to compare the difference with and without background blur.