Skip to content
AI Pixel Wizard
Your sequence0 clips
Source

Hologram

A sci-fi hologram hovering over a metal projector: a dot-matrix Earth, a DNA helix or your message, in glowing scan lines. Loops perfectly.

3D object, V2 Objects3DSeamless loop, verified1,225 lines of codev1.0.0

In Space & cosmos, Light, glass & shine, Craft & heritage

Next: Plasma BallSurprise me

Hologram preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source at reduced resolution.

Open in the title maker

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

Effect controls

Presets

Shown when the subject is Message, in capitals: letters with accents, numbers and common punctuation.

Shown above the message.

0.35
0.3
7

Changes when the glitches and flickers happen.

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

View code Sample video (default settings, 3.8 MB)
Info

What it is

A projection of light floats above a turned metal emitter: drawn in drifting scan lines with a bright rim, lit by a beam rising from the lens with dust floating up through it, and torn sideways now and then by a glitch that splits its colours. Choose the subject: a dot-matrix Earth (real coastlines) with flight paths arcing between cities, a turning DNA double helix, or a message panel with your title and a live signal trace, lettered in a squared sci-fi face. Pick the colour, how often it glitches and flickers, and the room colour. The hologram's light pools on the floor and catches the projector's edges.

Reuse it in your own idea

  • Global network intro: the Earth briefing preset with your title over the top of the frame.
  • Science explainer: the DNA lab preset as a cutaway while you talk.
  • Sci-fi story beat: the Incoming message preset with your own message, glitches up.

Which part is reusable

src/hologram.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses chrome-material only for the demo.

Good to know

  • The Earth shows land from 1:110m Natural Earth outlines: small islands are missing.
  • Message lettering covers A–Z with the common accents (á à â ã ä å ç), 0–9 and common punctuation; other characters are skipped.

Technical details

Technical details
Implementation
Three.js 0.185.1 (WebGL) · ES module src/hologram.js
Exports
  • createHologramProjection({ subject?, color?, title?, subtitle?, arcs?, spin?, lift?, seed? }) => { group, uniforms, lift, top, update(time, loopSeconds), dispose() }
  • createProjector({ color?, metal? }) => { group, lights, lensY, radius, dispose() }
  • createHologramPass(renderer, { width, height, glow?, split?, grain?, exposure? }) => { render({ scene, holoScene, camera, level?, tears?, output? }), dispose() }
  • hologramSignal({ loopSeconds, glitch?, flicker?, seed? }) => { level(time), tears(time) }
  • holoGlyphs(text, { tracking? }) => { width, strokes }
  • HOLO_COLORS: { cyan, green, amber, red, violet }
Dependencies (exact)
  • three@0.185.1 (source) — Renderer, geometry and the hologram shaders.
  • chrome-material@1.1.0 (demo) — Studio environment light and the room backdrop.
  • apw-runtime@1.0.0 (demo) — Demo harness.
How it fits a scene

Coordinates: The projector stands on y = 0 and is 1.93 units across; the hologram's centre floats 1.6 units above the lens and the Earth has a radius of 1.

Lighting: The projector is physical metal and needs scene.environment. The hologram emits light; add a PointLight in its colour above the lens so it lights the floor and the projector.

Timing: update(time, loopSeconds) and the signal are pure functions of time; frames render in any order.

Output
1080×1080, 30 fps, 12 s · procedural (computed from the frame number) · seamless loop — The subject turns whole turns, the arcs, dust, scan lines and signal trace repeat a whole number of times, and the glitches and flickers are scheduled round the loop, so the last frame meets the first.
Tested
Rendered 360 frames on 2026-10-06 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (WebGL 2 via SwiftShader (software)). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
Two scene passes and a small glow chain at full resolution; the Earth is one sphere shaded per pixel. Smooth at 1080p on laptop GPUs. Software WebGL (no GPU) renders slowly. Lower the glow chain or the resolution for phones.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- hologram/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:0fe820b77ccb39eb…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. Third-party: three.js 0.185.1 (MIT), Natural Earth 1:110m land (Public domain). License details
Provenance
Adapted from the owner's threejs-sketches/light-atmosphere/webgpu-hologram (MIT), rebuilt for AI Pixel Wizard in October 2026 in WebGL: a turned metal projector, three subjects (a dot-matrix Earth from Natural Earth coastlines with flight arcs, a DNA helix, a lettered message panel), a lit beam with rising dust, seeded glitches and flicker, and the frame/time contract.
BinMore like this

More like this

Play these full screen

Astrolabe

3D object3DSeamless loop16 seconds

Hourglass

3D object3DSeamless loop16 seconds

Lava Lamp

3D object3DSeamless loop15 seconds