Forem: deltacraft

I built a 3D audio visualizer and monetized it with Lemon Squeezy in a week

deltacraft — Wed, 18 Mar 2026 03:55:34 +0000

If you’ve ever wanted to turn music into a visual — and get paid for it — here’s how I built and shipped exactly that in a week.

A week ago, I had a working Three.js audio visualizer sitting on my local machine with no monetization plan. Today, it’s live on Netlify, approved by Lemon Squeezy, and accepting paid subscribers at $9/month.

Here’s exactly how I did it — including the pivot I had to make halfway through.

What I built

3D Audio Visualizer Pro is a browser-based app that takes audio input (microphone or file upload) and renders it as real-time 3D visuals using Three.js and the Web Audio API. It also lets you export the visuals as a video file (WebM/MP4) — which turned out to be the key to monetization.

👉 Live demo

Three scenes are included:

Sphere — expands and rotates with volume
Bars — 32 rainbow frequency bars
Particles — 500 particles that accelerate with the beat

The pivot: Chrome Extension → Web App (first)

I originally built this as a Chrome extension — and I’m still working on that version in parallel. But halfway through, I realized the real monetization opportunity wasn’t in the extension itself. It was in video export.

Musicians and content creators need visualizer videos for YouTube, TikTok, and Instagram. That’s a recurring need, which means recurring revenue. A web app makes that much easier to deliver — so I decided to ship the web app first and validate the monetization model before going further with the extension.

Switching only required replacing chrome.tabCapture with getUserMedia(). The entire Three.js rendering code carried over untouched. The pivot took less than a day.

Tech stack

Frontend: Vanilla JS + Three.js r128 (CDN) — single index.html file, no build step
Audio: Web Audio API (getUserMedia for mic, createObjectURL for file input)
Video export: MediaRecorder API at 30fps, outputs WebM/MP4
Hosting: Netlify free plan (commercial use allowed — Vercel Hobby is not)
Payments: Lemon Squeezy ($9/month, 7-day free trial, license key generation included)

No backend. No database. Just one HTML file deployed to Netlify.

The freemium model

Feature	Free	Pro ($9/month)
Visual scenes	3 scenes (watermarked)	All scenes, no watermark
Audio input	Microphone only	Mic + file upload
Video export	❌	✅ MP4 export

The video export gate is the core of the monetization strategy. Casual users get a free visualizer to play with. Musicians who need clean, exportable content for their socials have a clear reason to upgrade.

Why Lemon Squeezy

I compared several payment options:

Service	Fee	Notes
Lemon Squeezy	5% + $0.50	Tax handling + license keys included
Gumroad	10% + $0.50	Good for one-off digital products
Stripe direct	2.9% + $0.30	Cheapest, but needs a backend

For a solo developer shipping a SaaS MVP with zero infrastructure, Lemon Squeezy was the clear winner. They handle VAT/tax compliance across regions, which would otherwise be a legal headache. License key generation is built in, which I use to gate Pro features.

The KYB/KYC review process took about 10 days from first application to approval. They asked for a live demo URL, product details, and SNS links — nothing unreasonable.

At $10/sale, here’s what you actually take home: Stripe direct → $9.41, Lemon Squeezy → $9.00, Gumroad → $8.50. Once you’re past $2,000/month, Stripe direct starts making more sense — but until then, Lemon Squeezy’s tax handling and license key generation more than make up for the fee difference.

What’s next

Firefox AMO — porting the extension as a supplementary channel (1–3 days, free)
itch.io listing — reaching the creative coding / VJ community
YouTube / TikTok demo videos — the visualizer reacting to music is inherently shareable content
Product Hunt launch — once I’ve built more of an audience

Revenue target: $100/month within 1–2 months, $1,000/month within 3–6 months.

Lessons learned

Ship the MVP first. I almost delayed launch to add more scenes. Don’t.
The export feature IS the product. Nobody pays for a pretty visualizer. They pay for a tool that saves them time making content.
Netlify free plan is genuinely good for this kind of project. No cold starts, commercial use allowed, instant deploys from Git.
Lemon Squeezy’s review takes time. Submit early, keep your demo URL live during review, and respond to KYB requests as quickly as you can.
Claude Code changed the game for solo developers. No engineering background. No build tooling expertise. Just describing what I wanted and iterating. The Three.js implementation would have taken me weeks without it.

If you’re building something similar or have questions about the Three.js / Web Audio API implementation, drop a comment — happy to share more details.

Built by deltacraft — solo dev, building in public.

React Three Fiber vs Three.js: Which Should You Learn First?

deltacraft — Thu, 12 Mar 2026 15:12:04 +0000

If you’re getting into 3D on the web, you’ve probably hit this question fast: should I learn Three.js or React Three Fiber?

The short answer: it depends on where you’re starting from. Here’s how to decide.

What’s the Difference?

Three.js is the foundation. It’s a JavaScript library that sits on top of WebGL and lets you build 3D scenes without writing raw GPU code. It’s framework-agnostic — works with vanilla JS, Vue, Svelte, whatever.

React Three Fiber (R3F) is a React renderer for Three.js. It doesn’t replace Three.js — it wraps it. Under the hood, R3F is still Three.js. The difference is how you write it.

Here’s the same rotating cube in both:

Three.js (imperative):

const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshStandardMaterial({ color: '#c8ff00' })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

function animate() {
  requestAnimationFrame(animate)
  cube.rotation.x += 0.01
  renderer.render(scene, camera)
}
animate()

React Three Fiber (declarative):

import { useFrame } from '@react-three/fiber'
import { useRef } from 'react'

function Cube() {
  const ref = useRef()
  useFrame(() => { ref.current.rotation.x += 0.01 })

  return (
    <mesh ref={ref}>
      <boxGeometry />
      <meshStandardMaterial color="#c8ff00" />
    </mesh>
  )
}

Same result. Very different mental model.

Learn Three.js First If…

You’re new to 3D entirely.
Three.js forces you to understand the fundamentals: scenes, cameras, renderers, geometries, materials, lights. These concepts exist in R3F too, but they’re abstracted. Learning Three.js first means you actually know what’s happening under the hood.

You’re not using React.
R3F only makes sense in a React project. If you’re working with vanilla JS, Vue, or any other stack, Three.js is your answer.

You want maximum control.
Three.js gives you direct access to every WebGL primitive. For highly optimized or unusual rendering requirements, that control matters.

Learn React Three Fiber First If…

You already know React.
If hooks, components, and JSX are second nature to you, R3F will feel immediately intuitive. You can focus on learning 3D concepts without also learning a new imperative programming style.

You’re building a React app.
R3F integrates seamlessly with React state, routing, and the rest of your component tree. Managing 3D objects as React components is genuinely ergonomic.

You want to move fast.
The R3F ecosystem — especially @react-three/drei — gives you ready-made components for cameras, controls, environments, and effects. Things that take 50 lines in vanilla Three.js take 2 lines in R3F.

The Honest Take

Most working developers who use R3F learned Three.js first — even briefly. Understanding what a Scene, Camera, and Renderer actually are makes R3F much less magical and much more controllable.

That said, if you’re a React developer who wants to add 3D to a project now, starting with R3F is completely valid. You’ll pick up the Three.js concepts along the way.

The recommended path:

Spend a weekend with raw Three.js — build a scene, add lights, move a camera
Switch to R3F for everything after that

Quick Comparison

	Three.js	React Three Fiber
Style	Imperative	Declarative (JSX)
Framework	Agnostic	React only
Learning curve	Moderate	Lower (if you know React)
Performance	High	Equivalent — components render outside React, no overhead
Ecosystem	Mature	Growing fast
Control	Full	Full (it’s still Three.js)
Best for	Any stack, deep control	React projects, fast iteration

Want a Head Start?

If you’ve decided to go the R3F route and want to skip the boilerplate, I put together a cheat sheet with the patterns I use most — hooks, camera setup, lighting, performance tips, and common drei components:

👉 R3F Cheat Sheet on Gumroad — $7

It’s the reference I wish I had when I started.

Which did you start with — Three.js or R3F? Drop a comment below.

What is Three.js? And Why Every Developer Should Know It

deltacraft — Thu, 12 Mar 2026 14:58:00 +0000

If you’ve ever seen a website with a rotating 3D globe, an animated particle field, or a product you can spin around with your mouse — that was probably Three.js.

But what is it, exactly? And why should you care?

The Problem with Flat Websites

Most websites are 2D. HTML and CSS are powerful, but they’re fundamentally flat — boxes, text, images stacked on a canvas.

The browser, however, is capable of rendering full 3D graphics using something called WebGL. The problem? Raw WebGL is brutal to write. Hundreds of lines of low-level code just to draw a single triangle.

That’s where Three.js comes in.

Three.js in One Sentence

Three.js is a JavaScript library that makes 3D graphics in the browser actually possible for regular developers.

It wraps the complexity of WebGL into an intuitive API. Instead of writing shader programs and buffer arrays, you write things like this:

const geometry = new THREE.BoxGeometry()
const material = new THREE.MeshStandardMaterial({ color: '#c8ff00' })
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

That’s a 3D cube. Four lines.

What Can You Actually Build With It?

Here are real things developers build with Three.js:

Use Case	Example
Portfolio hero sections	Animated particle fields, floating 3D objects
Product configurators	Rotate and customize a product in 3D
Data visualizations	3D globe with live data points
Games	Browser-based 3D games
Immersive landing pages	Scroll-driven 3D animations

Google’s Data Arts Team — where Three.js creator Ricardo Cabello himself worked — has used it for interactive web experiences. But you don’t need a big team or a famous employer — individual developers build stunning things with it too.

Three.js vs React Three Fiber

If you’re a React developer, you’ll want to know about React Three Fiber (R3F) — a React renderer for Three.js.

Instead of imperative Three.js code, you write declarative JSX:

<mesh>
  <boxGeometry />
  <meshStandardMaterial color="#c8ff00" />
</mesh>

Same result, but it fits naturally into your React component tree. State, hooks, context — all of it works exactly as you’d expect.

R3F is now the standard way to use Three.js in React projects.

Why Should You Learn It?

Three reasons:

1. Your portfolio will stand out.
Most developer portfolios look identical. A 3D hero section immediately signals that you’re a developer who goes beyond the basics.

2. The job market rewards it.
Three.js and WebGL skills are in demand for creative agencies, product companies, and startups building immersive experiences. It’s a genuine differentiator on a resume.

3. It’s more accessible than you think.
You don’t need to understand the math behind 3D rendering. Three.js (and especially R3F) abstracts all of that. If you know JavaScript and React, you can start building 3D in an afternoon.

Getting Started in 5 Minutes

npm create vite@latest my-3d-app -- --template react
cd my-3d-app
npm install three @react-three/fiber @react-three/drei

Then drop this into a component:

import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'

export default function Scene() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="#c8ff00" />
      </mesh>
      <OrbitControls />
    </Canvas>
  )
}

You now have a 3D cube you can rotate with your mouse. That’s your starting point.

Want to Skip the Setup?

If you want to go straight to a production-ready 3D portfolio — with particle fields, scroll animations, and 5 different scene types — I built a starter kit that handles all of it:

👉 Performance Cheat Sheet

Drop in your info, run npm install, and you have a portfolio that actually stands out.

What’s stopping you from adding 3D to your next project? Drop a comment — I read every one.

How I Built a 3D Developer Portfolio That Actually Stands Out (with React Three Fiber)Three Fiber (Step-by-Step)

deltacraft — Wed, 11 Mar 2026 11:36:45 +0000

Most developer portfolios look the same. A hero section, a projects grid, a contact form. Yours deserves better.

In this post, I’ll show you how to build a portfolio with an animated particle system background, 5 different 3D scene types for your project cards, and scroll-based animations — all without deep Three.js knowledge.

Here’s what the final result includes:

Floating particle field with dynamic connection lines in the hero section
5 interchangeable 3D scenes: particles, orbit, wave, helix, sphere
Framer Motion scroll reveals
A single config.js file to customize everything — no Three.js needed

Tech Stack

React 18 + Vite
React Three Fiber
@react-three/drei
Framer Motion

The Core Idea: A Config-Driven Portfolio

The key architectural decision is a single config.js that controls everything — your name, bio, projects, colors, and even 3D scene settings:

const config = {
  name: 'Jane Doe',
  role: 'Creative Developer',
  headline: ['I Build', 'Digital', 'Experiences'],
  email: 'hello@yourname.com',

  scene: {
    heroParticleCount: 800,
    heroParticleSpeed: 0.3,
    accentColor: '#c8ff00',
  },
}

No digging through components. Change one file, the whole site updates.

The Hero: Particle Field with Connection Lines

The most visually striking part is the hero background — 800 particles floating in 3D space, drawing lines between particles that get close enough to each other.

function ParticleField({ count = 800, connectionDistance = 1.5, color = '#c8ff00' }) {
  const pointsRef = useRef()

  useFrame(({ clock }) => {
    const pos = pointsRef.current.geometry.attributes.position.array
    const t = clock.getElapsedTime()

    for (let i = 0; i < count; i++) {
      const i3 = i * 3
      pos[i3] += Math.sin(t * 0.5 + i) * 0.001
      pos[i3 + 1] += Math.cos(t * 0.3 + i) * 0.001
    }
    pointsRef.current.geometry.attributes.position.needsUpdate = true
  })

  return (
    <points ref={pointsRef}>
      <bufferGeometry>
        <bufferAttribute attach="attributes-position" array={positions} count={count} itemSize={3} />
      </bufferGeometry>
      <pointsMaterial
        size={0.03}
        color={color}
        transparent
        opacity={0.8}
        blending={THREE.AdditiveBlending}
        depthWrite={false}
      />
    </points>
  )
}

The AdditiveBlending is what gives it that glowing neon feel.

5 Scene Types for Project Cards

Each project card in the Projects section gets its own 3D scene. You pick which one per project in config.js:

projects: [
  {
    title: 'My SaaS App',
    description: 'Real-time analytics dashboard.',
    tags: ['React', 'Node.js'],
    sceneType: 'orbit',   // orbit | wave | helix | sphere | particles
  },
]

The scenes:

Scene	Visual	Best For
`particles`	Floating dots with connection lines	Hero, general
`orbit`	Particles orbiting a glowing center	Data/analytics projects
`wave`	Undulating grid of points	Creative/design projects
`helix`	DNA-style double helix	Science/tech projects
`sphere`	Pulsing particle sphere	3D/WebGL showcases

Animating Content with Framer Motion

The text content fades up on load using Framer Motion variants:

const fadeUp = {
  hidden: { opacity: 0, y: 30 },
  visible: (i) => ({
    opacity: 1,
    y: 0,
    transition: { duration: 0.8, delay: 0.5 + i * 0.2 }
  })
}

// Usage
<motion.h1 custom={1} initial="hidden" animate="visible" variants={fadeUp}>
  {config.headline[0]} <span>{config.headline[1]}</span>
</motion.h1>

The custom prop staggers each element — role tag first, then headline, then bio, then buttons.

Customizing Colors

The accent color runs through both the 3D scenes and CSS. Update it in one place:

scene: {
  accentColor: '#c8ff00',  // Change this
},
theme: {
  accent: '#c8ff00',       // And this
}

Popular alternatives: #00d4ff (electric blue), #ff3366 (hot pink), #a855f7 (purple glow).

Deploying to Vercel

npm run build
npx vercel

Done. Free hosting, automatic HTTPS.

Want the Full Setup Without Starting from Scratch?

Building all of this from scratch takes a while to tune — getting the particle physics right, the connection line performance optimized, the Framer Motion timing dialed in.

I packaged the complete, production-ready version into a starter kit: R3F 3D Portfolio Starter Kit

It includes all 5 scene types, the full page structure (Hero, Projects, About, Contact, Footer), and the config-driven setup described above. Drop in your info, run npm install, done.

What 3D effects are you using in your portfolio? Drop a comment — I read every one.