Skip to content

Ceiling Fan Wipe

The overhead ceiling fan transition from TikTok: a slowly turning fan right under the camera, and every time a blade sweeps across, the picture below has changed.

Effect, V1 Effects2DSeamless loop, verified409 lines of codev1.0.0

In Machines & clockwork

Next: Time Grows HereSurprise me

Ceiling Fan Wipe preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

5
8

How many times a blade passes and the look changes in the 8-second loop. 8 is one change a second.

Corner: the hub sits in the top-left corner and the blades sweep diagonally across. Middle: the fan hangs over the centre and the whole picture cuts as a blade crosses the subject.

Sweep: the new look follows the blade across the frame. Cut: the whole picture changes the moment a blade covers the subject. With the hub in the middle it always cuts.

0.5

Blur along the turn, as a fraction of a frame. 0 is razor sharp.

3

Out-of-focus blur on the fan, because it is close to the lens (pixels at 1080).

0.35

Number and name each look in the corner, lookbook style.

3

Changes the wood grain and the floor details.

The preview runs the same code your AI receives. These settings travel with the hand-off.

Info

What it is

The ceiling fan trend, rebuilt as a transition you can reuse. The camera looks straight down past a ceiling fan; each time a blade passes over the subject, the look underneath changes, and the cut is always hidden under the blade. The fan is drawn entirely in code: wood-grain or painted blades on metal blade irons, a brass, nickel, black or white motor cap, real motion blur, a soft focus because the blades are close to the lens, and a soft shadow on the floor. Choose the number of blades, the finish, how often the look changes, which way it turns and whether the new look follows the blade (sweep) or appears at once (cut). The demo wipes between four floors under window light; in your project the looks can be anything you can draw: outfits, products, photos, video frames or other ingredients.

Reuse it in your own idea

  • Lookbook reel: make drawLook draw photo or video frame number index of your outfits, set passes to the number of outfits (or a multiple of it) and use lookAt to put the right caption on each.
  • Colourway reveal: draw the same product shot from above in four colours, or four presets of Soft Moving Gradient with Kinetic Title Reveal on top, and let the fan wipe between them.
  • Use drawFan alone over any scene for the overhead fan as a foreground layer, then run Dither Animation's applyToCanvas over the result for a lo-fi version of the trend.

Which part is reusable

src/ceiling-fan-wipe.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • It is the transition and the fan, not the person: the outfits, products or photos underneath are yours to supply (the trend itself uses AI to restyle one photo).
  • Seen only from straight under the ceiling; there is no tilted or perspective camera.
  • Sweep assumes the hub sits near a corner or an edge; with the hub in the middle use cut, as real edits do.
  • Blur uses the canvas filter property; browsers without it (Safari before 18) show sharp blades and a hard shadow.

Technical details

Technical details
Implementation
Canvas 2D — plain browser JavaScript, no libraries · ES module src/ceiling-fan-wipe.js
Exports
  • createCeilingFanWipe({ blades?, hub?, hubSize?, reach?, bladeWidth?, finish?, metal?, passes?, direction?, shutter?, samples?, focusBlur?, shadow?, shadowOffset?, lightAngle?, subject?, mode?, seed? }) => { draw(ctx, info, width, height, drawLook), drawFan(ctx, info, width, height), angleAt(time, duration, width?, height?), lookAt(time, duration), passes, blades }
Dependencies (exact)
  • apw-runtime@1.0.0 (demo) — Demo harness and seeded random numbers for the floors. src/ceiling-fan-wipe.js has no dependencies.
How it fits a scene

Coordinates: hub and subject are fractions of width and height from the top left; sizes are fractions of the shorter side. Angles in radians, clockwise on screen.

Lighting: The fan carries its own light: a sheen on the blades that brightens as they turn toward the light direction (lightAngle), lit blade edges, a metal cap with a glint, and a soft floor shadow offset by shadowOffset. Match lightAngle and shadowOffset to the light in your looks.

Timing: Pure function of info.time and info.duration. The look index changes exactly when a blade centre line crosses the subject; lookAt(time, duration) returns it, starting at 0.

Output
1080×1080, 30 fps, 8 s · procedural (computed from the frame number) · seamless loop — The fan turns a whole number of blade spacings per loop (Changes per loop) and every blade is identical, so the last frame meets the first. Changes per loop is always a multiple of 4, the number of demo looks, so the loop also ends on the look it started with.
Tested
Rendered 240 frames on 2026-10-03 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
Per frame: up to three looks, 8 motion-blur samples of the blades (one full-frame layer each) and two blurred composites for the shadow and the soft focus. The blade texture is computed once per output size. The live preview on aipixelwizard.com uses 4 motion-blur samples; renders and exports use 8. Motion blur and the blur filter dominate the cost; for a live preview at 4K or on phones pass samples: 4 and focusBlur: 0.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- ceiling-fan-wipe/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:963098383927f554…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
Provenance
Original code written for AI Pixel Wizard on 2026-10-03 by an automated agent (the daily trend routine), inspired by the AI ceiling fan transition trend on TikTok and Reels (see content/trends/2026-10-03-ceiling-fan-wipe.md). The blade-as-wipe idea is the trend itself, as described by The Tab (https://thetab.com/2026/09/28/how-to-do-the-vibey-ai-ceiling-fan-trend-from-tiktok-where-your-outfit-changes) and Pixazo (https://www.pixazo.ai/trending/fan-transition-trend); the fan, wood grain, motion blur, wipe geometry and floors are generated by this code. No code, images, fonts or shaders were copied.
BinMore like this

Ball Clock

3D object3DSeamless loop16 seconds

Astrolabe

3D object3DSeamless loop16 seconds

Hourglass

3D object3DSeamless loop16 seconds