Showcasing Three.js on X / Twitter

Season 15 · Article 04 · Portfolio & Career

A great demo with bad framing dies in your followers' feeds. The viral Three.js posts all do the same five things. Format, length, hook, audio, post timing — practical playbook for putting your work in front of people.

The viral-Three.js shape

Browse #threejs trending and you'll see one pattern:

• 2–8 second loop, not a 30-second walkthrough
• Hooks in the first frame — the "wow" visible immediately
• 720p or 1080p MP4, not GIF (GIFs cap at 15MB and look terrible)
• 9:16 vertical OR 1:1 square for X, NOT 16:9
• Captioned text overlay showing what's interesting (Twitter mutes audio by default)

Capture the demo

# macOS: built-in screen recording at full quality
# Cmd+Shift+5 → Record Selected Portion → record → trim

# Or programmatically with CCapture.js
import CCapture from 'ccapture.js';
const capturer = new CCapture({ format: 'webm', framerate: 60 });
capturer.start();
// run your render loop, calling capturer.capture(canvas) per frame
// then capturer.stop(); capturer.save();

CCapture freezes time — your render loop runs faster than realtime, so you can capture 60fps even if your scene only achieves 30fps live. Critical for complex scenes.

The 8-second rule

X's autoplay shows the first 8 seconds of any video to anyone scrolling past. After 8s, viewers must actively tap to keep watching. Your demo's first 8 seconds are the whole show.

• Frame 1: the most impressive shot. Not the setup. Not the build-up.
• Frames 1-8s: complete one full visual cycle of the demo's main idea.
• Loop the video — seamless wrap from frame N back to frame 1.

Vertical vs square

X's mobile feed shows vertical 9:16 at full width. Square 1:1 takes 50% less vertical space but is harder to scroll past (eye stays longer). Both beat 16:9, which gets letterboxed and de-prioritized.

For Three.js demos, square (1:1) usually wins — 3D scenes don't naturally fit 9:16, and you have more freedom in framing.

The text overlay

Two lines of bold white text, anchored top-left:

• Line 1: what it is ("Procedural galaxy in 30 lines of Three.js")
• Line 2: the hook ("Tweak any param. Watch it rebuild.")

Captioning lets people scrolling without sound understand what's interesting. Without it, your demo is just colorful noise.

The tweet copy

I rebuilt the iconic Bruno Simon galaxy generator
in 30 lines of Three.js.

  • 200k particles
  • spiral arms via one equation
  • cubic distribution for a dense core
  • additive blending for the glow

Full breakdown + code: [link to your article]

Specifics, not vagueness. Numbers, not adjectives. A clear CTA at the end. Tag the inspiration if relevant (@brunosimon) — they often retweet.

Posting timing

Dev Twitter peaks weekdays 9am–11am Pacific (US morning, EU afternoon). Weekend posts have lower engagement on dev content. Tuesday/Wednesday are quietly strongest.

Don't tweet at 3am even if you finish then — your impressions will be 10% of a Wednesday-morning post.

What converts

• Hashtags — #threejs, #webgl, #creativecoding, #webdev. 2-3 max. More = spammy.
• Engage with replies — first hour after posting. Reply to everyone. Algorithm boost.
• Crosspost — Mastodon, Bluesky, dev.to, Reddit r/threejs. Different audiences, different lives.
• Email yourself the link — if it does well, you have it bookmarked for your portfolio.

Common first-time pitfalls

Exercises

1. Post one demo this week. Pick from your Season 0 work. Format per this article. Track impressions for 24h.
2. Build a loop. Re-shoot a demo specifically to loop cleanly — frame 1 = frame N. Use a circular animation (rotating object, infinite scroll). Test the loop point.
3. Cross-post test. Same demo to X, dev.to, Mastodon, r/threejs. Note which platform converts best (CTR to your portfolio).