Forem: Tim Vučina

A Developer's Brush Stroke

Tim Vučina — Mon, 09 Jun 2025 20:29:02 +0000

Yo.

Is it just me, or does it sometimes feel like we're artists... hired to paint by numbers?
You sit down with a blank canvas, full of ideas, ready to create something meaningful, and then someone hands you a color-coded template and says, "Just stay inside the lines. Oh, and the sky has to be green because marketing thinks it'll stand out more."
(I know It's not just me btw)

At first, I thought software development was going to be like architecture with a heartbeat, something structured, sure, but still alive. Something you could feel proud of. And sometimes, it is. But too often, it becomes a process of carrying out instructions from people who don't understand the medium, or worse, don't care to.

I'm not trying to sound bitter. I just want to talk about what it feels like to build things when you care, and what happens when the space to care slowly disappears.
Not just for me. But for a lot of people I know who got into this field to make something real.

The Artist in a Factory

There was a time when painters didn't really get to paint what they wanted. They worked under wealthy patrons (kings, popes, merchants), people who paid well, but also had very specific ideas about how their nose should be shaped in the portrait. You weren't hired to express yourself; you were hired to flatter the client and follow instructions, ideally without too much talking back.

Sometimes, working in tech today feels like that.

You're brought on for your skill, your ability to translate ideas into working systems, but more and more, it feels like the "ideas" part has already been done for you. The blueprint is drawn, the color palette decided, and your job is to fill in the pixels. Quickly. Quietly. Consistently.

We like to say that building software is creative work, and on a good day, it really is. But a lot of the time, it feels more like assembling furniture with someone else's instructions, except the instructions are vague, incomplete, and being rewritten mid-build by someone who's never actually put furniture together.

It's not that we don't want to collaborate. We do. But there's a difference between working with someone and working for someone in the "just do what I say" sense. Most developers I know didn't get into this to be efficient hands, they got into it to build things that matter.

The Role of the Founder (and the Power of Care)

If you're trying to build a good product, there's one thing that matters more than any framework, process, or project management tool: whether the people building it actually care.

And here's the strange part: most of them want to. Most developers I know want to feel proud of what they're building. They want to get in flow, to push something forward, to make it good. But that only happens when they're given the room to care in the first place.

That's where leadership comes in.
I'm not talking about Gantt charts or sprint velocity, I'm talking about something simpler: creating the conditions for care. If you're a founder, a lead, a client, that's basically your main job. Not to micromanage every step, not to control every outcome, but to build an environment where people want to do their best work.

And if you don't trust them to do that…
well, maybe the honest move is to learn to code and build it yourself.

Because otherwise, what are we doing here? Hiring talented people just to override them at every turn feels less like leadership and more like ego with a budget.

Chasing the Right Kind of Win

There's this idea floating around that the whole point of building something (especially a product) is to win. To scale, to raise, to exit. To hit the charts, the KPIs, the milestone deck your investors clap for.

And sure, I get it. Success matters. Money keeps the lights on. But when that becomes the main thing, the actual reason you're doing this, it starts to feel like you're playing a different game entirely.

Some people build like gamblers.
They watch the market, make their bets, optimize for attention, and hope the numbers line up. And sometimes, they win. Fast. Big. Loud.

But I don't want to play that game.

For me, it's more like cooking for someone you love.
Not a plate you're trying to sell to a million people. Just one you care about. You pick the ingredients. You burn a few. You taste as you go. And when someone takes a bite and says, "Damn, this is exactly what I needed"—that hits different. That's the kind of win that lingers.

It's not about ignoring results. It's about asking which results matter.

Chasing money might get you a quick win.
Chasing meaning builds things that actually last.

On Passion (Without Saying 'Passion')

The word passion gets tossed around a lot. So much that it barely means anything anymore. It shows up in job postings and startup manifestos like parsley on a plate—decorative, expected, mostly ignored.

But when you've actually felt it, you know it's not fluff. It's fuel.

When I care about what I'm building (not just the outcome, but the process), I don't work harder because I'm told to. I work harder because I want to. I think clearer. I solve faster. I obsess in a good way. I come up with ideas in the shower, on walks, while brushing my teeth. It's not a grind, it's a hum in the back of your mind that says, this matters.

And I know not everyone gets that feeling every day. Life's messy, work is work. But when you do get it (even once) you remember why you got into this in the first place.

It's not about being "motivated." It's about being connected. About building something you're not just getting paid for, but actually believe in (even a little). That belief is worth more than ten checklists and a roadmap. Because that's where the real velocity comes from, not pressure, not deadlines, care.

The Myth of Roles and the Power of Human Wholeness

Sometimes people ask, "So what's your role on the project?"
And honestly, I don't want one.

Not because I'm trying to be difficult, or special, or some "multidisciplinary visionary" or whatever. I just think roles are often a polite way of saying "stay in your lane." And I've never met a great product that was built by people staying in their lanes.

I don't want to just write code.
I want to shape the idea, question the assumptions, care about the details, collaborate on the design, debug the emotion in a moment, not just the logic. And I think most people (if you let them) want that too.

We're not machines with clean-cut inputs and outputs. We're messy, curious, intuitive people. And the best products I've ever seen didn't come from a process, they came from people who were allowed to show up fully. People whose personal instincts, weird quirks, random late-night thoughts, and gut feelings made it in.

That's where richness comes from.
Not from role clarity, but from human overlap. From the places where our perspectives collide and blend and sharpen each other. That's where the soul of a product starts to form.

I don't want a title.
I want to be part of something that feels like it matters.

On Chaos (and Why I Don't Fear It)

One of the most common pushbacks to everything I've said is some version of:
"But you can't just let people run around doing whatever they want. It'll be chaos."

And yeah, it might.
But not the kind of chaos people are afraid of.

When people say "chaos," they usually mean lack of control. Disorganization. Delays. Waste. But I don't think that's real chaos. I think real chaos is when you have a team of people who've stopped caring, who are just following instructions, staying in their lanes, hitting the metrics, and checking out mentally the moment their part is done. It might look neat on the outside. But on the inside? It's dead.

The good kind of chaos (the human kind) comes from people actually bringing their full selves to the table. It's a little noisy. It's full of ideas, experiments, wrong turns, and weird brilliance. It's harder to manage on paper. But it's how great things happen.

And the best way to navigate that chaos isn't with stricter rules or more oversight.
It's with trust. With shared goals. With a team that actually likes each other.
When you're building something alongside people you respect and care about, you don't need to be watched. You want it to work. You self-correct. You collaborate. You clean up after yourselves, not because someone told you to, but because it matters to you.

That kind of harmony doesn't come from modern management frameworks. It comes from letting people be people, and trusting that if the goal is clear and the culture is right, they'll do more than you ever could by forcing it.

Closing – A Quiet Note

I don't have a grand solution. I'm not claiming to know the one right way to build software, or teams, or companies. I just know what it feels like to care deeply about the work—and how rare it is to be in an environment that actually allows for that.

Most of the time, it's the opposite.
You care, and the system shrugs. You try, and the process trims your edges. You want to make something real, but the layers between you and the thing keep getting thicker.

And still, I don't think it has to be this way.

I've seen moments (rare, but unmistakable) when it works.
When a group of people trust each other enough to be honest, to push each other, to share the weight and the weirdness of building something from nothing.
When care isn't micromanaged or incentivized, it's just there, because the people are.

And that's all I'm really saying.
That maybe we don't need more control. Maybe we need more belief, in the work, in the people doing it, and in the strange, unpredictable, beautiful things that can happen when you stop painting by numbers... and finally let the brush breathe.

Just maybe. ❤️

🧩 Beyond the Popup: Crafting Next-Level Chrome Extensions with CRXJS

Tim Vučina — Wed, 19 Feb 2025 10:21:50 +0000

1. The Magic of Chrome Extensions ✨

Chrome extensions are more than just handy little tools - they’re like superpowers for your browser. From automating workflows to enhancing user experience, they can transform the way people interact with the web. But the real beauty? Extensions can seamlessly integrate into websites, modify content on the fly, and even leverage AI for mind-blowing results (like Classmate does).

Instead of a dull definition, let’s highlight what makes extensions exciting:

They live inside your browser – meaning instant access and control over webpages.
They hook into powerful APIs – like the Chrome Storage API, Context Menus, Side Panels, and even WebRTC.
They enable automation, AI, and interaction enhancements – basically, they let you mold the web to your will.

2. Choosing Your Stack: The Right Tools for the Job 🛠️

Unlike traditional web apps, building a Chrome extension usually requires a carefull balancing of performance, compatibility, and maintainability. There are multiple ways to approach extension development, from vanilla JavaScript to full-blown frameworks.

Popular Choices for Extension Development:

Plain JavaScript – Lightweight but messy for scaling.
React (or Preact) – Great for UI-heavy extensions but requires careful bundling.
TypeScript – A must-have for maintainability.
Vite + ESBuild – Super fast and developer-friendly for modern extensions.
TailwindCSS – Ideal for crafting polished UIs quickly.
Supabase/Firebase – Cloud storage, authentication, and real-time syncing made easy.

For Classmate, we went with React, TypeScript, Vite, Tailwind, and Supabase, ensuring a modern, scalable architecture with minimal bloat.

3. The Unique Challenges & Superpowers of Extension Development 🔥

Chrome extensions offer incredible browser APIs but also introduce quirks and gotchas that developers need to navigate.

The Good: Browser APIs That Supercharge Your Extension 🚀

chrome.tabs – Interact with and modify webpages dynamically.
chrome.scripting – Inject JavaScript and CSS into any page.
chrome.contextMenus – Create custom right-click options for quick actions.
chrome.storage – Persist user settings without a backend.
chrome.identity – Handle authentication seamlessly.

The Bad: Common Pitfalls & Limitations 😬

Manifest V2 → V3 transition – Service workers replace background scripts, breaking some old workflows.
Restricted access – Some APIs are off-limits (e.g., network requests need special permissions).
No direct database storage – Requires external storage like Firebase or Supabase.
Performance concerns – Extensions should be lightweight to avoid slowing down the browser.

The Ugly: Bad Practices That Can Doom Your Extension ❌

Over-permissioning – Requesting too many permissions leads to rejection by the Chrome Web Store.
Not optimizing storage – Extensions with large local storage can slow down performance.
Blocking the main thread – Keep content scripts efficient to avoid laggy pages.

4. Bridging the Gap: Messaging Between Popup & Content Scripts 🔄

One of the biggest challenges in Chrome extension development is getting different parts of the extension – popup, background scripts, and content scripts – to talk to each other efficiently. Unlike a traditional web app, where everything runs in a single execution context, Chrome extensions are split into isolated environments.

This means:

✅ The popup doesn’t directly control the webpage – it must send messages.

✅ The content script can interact with the page but lacks access to extension APIs – it needs to communicate with the background.

✅ The background service worker acts as a central hub, receiving messages and dispatching commands.

How We Handle Messaging in Classmate ⚡

To keep our messaging system structured and scalable, we use typed messages with TypeScript, ensuring every communication has a clear format.

Message Structure & Commands

We define a set of commands, like:

export type Command =
  | 'START_SCREENSHOT'
  | 'ASK_AI'
  | 'TRIGGER_AUTOSOLVE'
  | 'OPEN_SIDEBAR';

Each message follows a strict format, using interfaces like:

export interface AskAI extends BaseMessage {
  command: 'ASK_AI';
  text: string;
  autoSolveData?: AutoSolveQuestion | null;
}

This ensures every part of our extension knows exactly what kind of messages to expect, reducing errors.

Sending Messages to the Active Tab

We use a helper function to find and message the active tab:

export const sendMessageToActiveTab = async (message: Message) => {
  const tab = await getActiveTab();
  if (!tab?.id) throw new Error('No active tab found');
  return await sendMessageToTab(tab.id, message);
};

This makes sure we’re always targeting the currently open webpage, whether it’s to trigger AI processing or capture screenshots.

Listening for Messages

We use React hooks to set up message listeners inside components. This makes handling commands like "START_SCREENSHOT" declarative and efficient:

useMessageListener('START_SCREENSHOT', () => {
  setState('area-picker');
});

This way, the UI updates reactively whenever the popup or background script sends a command.

The Result? A Seamless Experience 🎯

With typed messages, structured commands, and well-defined listeners, our extension avoids race conditions, unexpected behavior, and debugging nightmares. Instead, every part of the extension stays in sync, making interactions smooth and instantaneous. 🚀

5. CRXJS: The Modern Way to Build Chrome Extensions ⚡

If you’re building Chrome extensions with modern web frameworks, CRXJS is a game-changer. It simplifies the development process by integrating seamlessly with Vite, allowing you to use React (or other frameworks) with minimal hassle.

Why CRXJS?

Traditional Chrome extension development often involves complex configurations, dealing with manifest quirks, and managing different extension environments (background, content scripts, popup). CRXJS abstracts much of this complexity while staying lightweight and performant.

✅ Zero-config setup – Works out of the box with Vite.
✅ Automatic bundling – No need to manually manage content scripts and background scripts.
✅ HMR (Hot Module Replacement) for popups & options pages – Develop faster without needing to reload the extension manually.
✅ TypeScript & React support – Makes modern development workflows much easier.

Setting Up CRXJS in Your Project 🚀

To get started, install CRXJS Vite plugin:

npm install @crxjs/vite-plugin -D

Then, configure it in vite.config.ts:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { crx } from '@crxjs/vite-plugin';
import manifest from './manifest.json';

export default defineConfig({
  plugins: [react(), crx({ manifest })],
});

This setup ensures that your extension files are properly processed, including background scripts, content scripts, and popup UI.

Efficiency and Simplicity 🏆

With CRXJS, we eliminated the boilerplate, improved the development speed with HMR, and kept our extension lean and maintainable. It’s the perfect tool for modern Chrome extension development, allowing us to focus on building features instead of wrestling with configuration files.

If you're working with React, Vite, or TypeScript, CRXJS is a no-brainer! 🚀

6. Our Journey: How We Built Classmate 🏆

When developing Classmate - AI-powered quiz assistant, we faced all the classic extension challenges:

✅ Ensuring a seamless user experience with React + Vite.

✅ Handling authentication with Supabase.

✅ Managing API calls efficiently with Zodios.

✅ Avoiding Chrome Web Store rejection by keeping permissions minimal.

Through smart architecture choices and the right stack, we turned a simple idea into a powerful AI assistant for online learners. 🚀

Final Thoughts 💡

Chrome extension development is an exciting playground where you can experiment with browser APIs, automation, and AI. Whether you’re building productivity tools, AI-driven helpers, or something entirely unique, there’s no limit to what you can create.

Got an idea? Time to ship it! 🚢💻

🚀 Building an Interactive 3D Rocket Easter Egg with React Three Fiber

Tim Vučina — Tue, 17 Sep 2024 09:16:23 +0000

When we hit 1000 followers on LinkedIn, we knew we had to celebrate in style! Inspired by Vercel's awesome post on Building an Interactive 3D Event Badge with React Three Fiber, we wanted to take that vibe and launch something fun of our own. So, what better way to celebrate than with a 3D rocket Easter egg on our shiny new website, zerodays.dev?

It’s one of those things that’s just fun to build, like the digital equivalent of a fidget spinner, but way cooler. We had a blast working on it, and today we’re going to take you behind the scenes.

Let's get straight into it.

🚀 Table of Contents:

🏁 The Setup
- 🛠️ Tools to Build Our 3D Rocket
- 🎬 Setting Up the 3D Scene
- 🎥 Camera Choice: Why We Went with Orthographic
- 💡 Quick Tip: Handling Events with eventSource
🚀 The Main Actor: Our Interactive Rocket
- Key Features
- Rocket Following Movement: Keeping Track of the Mouse
- 💡 Quick Tip: Handling Events on <group>
- 🚀 Summary - Rocket
💥 Particle System: Fueling the Rocket’s Exhaust
- Key Concepts
- 💥 Summary - Particles
🪨 SpaceRocks: Asteroids with Physics and Splitting
- Key Features
- 🪨 Summary - SpaceRocks
🌌 SpaceEnvironment: Immersive Space Backdrop
- Key Features
- 💡 Quick Tip: Using window.devicePixelRatio for Consistent Shader Rendering
- 🌌 Summary - SpaceEnvironment
🏎️ Performance Boosts: Optimizing for Smooth Rocket Experience
- 🚀 1. Frame Loop Control: "Always" vs. "Demand"
- 🚀 2. Custom useViewportSize Hook
- 🚀 3. Mesh Instancing for Planets
- 🚀 4. Using Refs for Non-Rerender Values
- 🚀 5. General React-Three-Fiber Performance Tips
- 💡 Quick Tip: Canvas Size Limits on Some Devices
🚀 Wrapping it Up: The Final Countdown

🏁 The Setup:

🛠️ Tools to Build Our 3D Rocket

We kept our tech stack lean but powerful to make this Easter egg fly.

React: The core of our interactive UI.
TypeScript: Strong typing to keep our code bug-free.
react-three-fiber: The magic behind our 3D scene, integrating three.js with React.
react-three-drei: Handy helpers for cameras, lighting, and effects.
react-three-rapier: Physics engine for realistic collisions and rocket interactions.

🎬 Setting Up the 3D Scene

The first step was setting up the basic 3D scene for our rocket. We used react-three-fiber to handle rendering the scene inside a React component, along with react-three-drei for some helpers like the camera and lighting. We also integrated react-three-rapier for physics and collision detection.

Here’s a simplified version of the initial setup:

'use client';

import { Canvas } from '@react-three/fiber';
import { OrthographicCamera } from '@react-three/drei';
import { Physics } from '@react-three/rapier';
import Rocket from '@/components/three/rocket';
import SpaceEnvironment from '@/components/three/space-environment';
import SpaceRocks from '@/components/three/space-rocks';

const RocketScene = () => {
  return (
    <Canvas>
      <OrthographicCamera makeDefault position={[0, 0, 0]} zoom={1} />
      <ambientLight intensity={0.4} />
      <directionalLight position={[-30, 100, 0]} intensity={0.8} />

      <Physics gravity={[0, 0, 0]}>
        <Rocket />
        <SpaceRocks />
      </Physics>

      <SpaceEnvironment />
    </Canvas>
  );
};

export default RocketScene;

This sets up our 3D world with:

Rocket: The star of the show.
SpaceEnvironment: A cool space backdrop.
SpaceRocks: Floating space debris that adds extra flair—and danger! The rocket can collide with these rocks, causing them to split apart for a more dynamic and interactive experience.
Lighting: Ambient and directional lights for a cosmic glow.
Physics: Handles collisions and interactions between objects.

🎥 Camera Choice: Why We Went with Orthographic

We chose an Orthographic Camera for our scene because it keeps everything proportional, no matter where the rocket is flying. Since our rocket scene spans the entire page (with height dictated by the scrollable content), an orthographic camera lets us fly the rocket up and down smoothly without any weird perspective distortions. It ensures a consistent, user-friendly experience as you scroll through the page and interact with the rocket.

💡 Quick Tip: Handling Events with `eventSource`

To ensure the 3D rocket scene can still respond to pointer events (e.g., mouse or touch interactions) even when other page content overlays it, we used the eventSource prop in our Canvas component. This tells react-three-fiber where to listen for events. By setting eventSource to the root element (#root), the rocket can receive events while other content layers above it.

Here's how we set it up:

<Canvas
  eventSource={document.getElementById('root')}  // Specifies the DOM element to listen for pointer events
  eventPrefix="page"         // The event prefix that is cast into canvas pointer x/y events
/>

🚀 The Main Actor: Our Interactive Rocket

The rocket is the star of the show—interacting with the environment, responding to mouse movements, and launching across the page. To make it truly dynamic, we used react-three-fiber for rendering and react-three-rapier for physics. Let’s break down the core functionality.

Key Features:

State Machine: Handles the rocket’s different states—idle, launching, following (tracking the mouse), and resetting.
Collision and Physics: Using CapsuleCollider and RoundConeCollider, the rocket can collide with space rocks. Physics also helps simulate rocket movement and impulse on launch.
Hover and Click Interaction: The rocket responds to mouse hover with a scale-up effect, and clicking either launches it or resets its position.
Smooth Movement: The rocket tracks the mouse, using vectors to calculate distance and apply force, while also smoothly rotating to follow its flight direction in useFrame().
Particles: Adds dynamic exhaust particles during the rocket’s movement.

Here’s a key snippet:

const Rocket = memo(() => {
    // Refs and Hooks
    const rocketHovered = useRef(false);
    ...

    // State machine
    const { value: rocketState, transitionTo } = useStateMachine({
      initial: 'idle',
      states: {
        idle: {},
        launching: { onEnter: () => { setTimeout(() => transitionTo('following'), 500); } },
        following: {},
        resetting: { onEnter: async () => { await resetRocket(); transitionTo('idle'); } },
      },
    });

    // Rocket reset logic
    const resetRocket = useCallback(() => {
      ... // Reset rocket position, velocity, rotation
    }, [viewportSize]);

    // Frame logic (executed every frame)
    useFrame((state, delta) => {
      ...
      // Scale the rocket when hovered
      rocketHovered.current
        ? meshRef.current?.scale.lerp(new Vector3(1.1, 1.1, 1.1), delta * 5)
        : meshRef.current?.scale.lerp(new Vector3(1, 1, 1), delta * 5);

      // Execute state-specific logic
      switch (rocketState) {
        case 'idle': resetRocket(); break;
        case 'launching': rocket.applyImpulse(..., true); break;
        case 'following': { ... } // Move rocket towards pointer, apply rotation
      }
    });

    return (
      <group>
        <RigidBody ref={rigidBodyRef}>
          <CapsuleCollider />
          <RoundConeCollider />
          <group
            ref={meshRef}
            onPointerEnter={() => { rocketHovered.current = true; }}
            onPointerLeave={() => { rocketHovered.current = false; }}
            onClick={() => rocketState === 'following' ? transitionTo('resetting') : transitionTo('launching')}
          >
            <RocketModel />
          </group>
        </RigidBody>

        {/* Our own particle effects component of the rocket exhaust clouds */}
        <Particles
          visible={rocketState === 'launching' || rocketState === 'following'}
          objectRef={exhaustMeshRef}
          config={{ ... }}
        />
      </group>
    );
});

Rocket Following Movement: Keeping Track of the Mouse

One of the coolest parts of our rocket is its ability to follow the mouse as it flies through space. This is powered by the useFrame hook in react-three-fiber, which lets us update the rocket's position and rotation every frame. Here's how we handle the rocket's smooth movement and rotation while tracking the user's pointer.

Key Points:

Mouse Tracking: We convert the normalized device coordinates (NDC) from the pointer into viewport coordinates and move the rocket towards that point.
Distance Calculation: We compute the distance between the rocket's current position and the target, using that to apply a force in the correct direction.
Rotation: The rocket smoothly rotates to face the direction it’s moving, giving a realistic flight experience.

Here’s a simplified version of how we achieve this:

useFrame((state, delta) => {
  const rocket = rigidBodyRef.current;
  if (!rocket || !viewportSize) return;

  // Convert pointer coordinates to viewport space
  const x = (state.pointer.x * viewportSize.width) / 2;
  const y = (state.pointer.y * viewportSize.height) / 2;

  // Calculate distance between current rocket position and target
  const currentPos = rocket.translation() as Vector3;
  const targetPos = new Vector3(x, y, currentPos.z);
  const distance = targetPos.distanceTo(currentPos);

  // Apply impulse to move rocket toward target
  direction.current.copy(targetPos).sub(currentPos).normalize().multiplyScalar(delta * 1000 * distance);
  rocket.applyImpulse(direction.current, true);

  // Calculate the rotation angle and smoothly rotate the rocket
  const rotationAngle = Math.atan2(y - currentPos.y, x - currentPos.x);
  targetQuaternion.current.setFromAxisAngle(rotationAxis.current, rotationAngle - Math.PI / 2);
  slerpedQuaternion.current.slerpQuaternions(rocket.rotation(), targetQuaternion.current, 0.08);
  rocket.setRotation(slerpedQuaternion.current, true);
});

💡 Quick Tip: Handling Events on `<group>`

When dealing with three.js and raycasting, it's common to have multiple meshes or submeshes within a <group>. This can result in multiple onClick or onPointerEnter events being fired as each submesh gets hit by the raycaster. To avoid this, we can use e.stopPropagation() to prevent multiple event triggers.

Here’s a quick example:

<group
  name="rocket"
  onClick={(e) => {
    e.stopPropagation(); // Prevent multiple onClick calls

  }}
>
  <RocketModel />
  <pointLight />
  <mesh ... />
</group>

🚀 Summary - Rocket:

State Machine: Controls the rocket's different modes—idle, launching, following (tracking the mouse), and resetting. This ensures smooth transitions between states and interactions.
Physics and Collisions: Using CapsuleCollider and RoundConeCollider, the rocket can collide with objects like space rocks. Physics-based movement and impulse handling ensure realistic responses to collisions.
Mouse Interaction: The rocket grows when hovered over, thanks to scaling effects. Clicking it launches the rocket or resets it to its initial state, adding fun interaction for users.
Smooth Mouse Tracking: The rocket tracks the mouse position smoothly, with calculated forces applied based on the distance to the pointer. It rotates toward the direction it’s moving, giving the feeling of true flight.
Particles: The dynamic exhaust particles follow the rocket, adding visual flair as it launches and moves.

💥 Particle System: Fueling the Rocket’s Exhaust

Our rocket wouldn't feel complete without some epic exhaust particles! We built a custom particle system using three.js for rendering and shader-based control to give it that dynamic look. The system is fairly customizable, allowing us to control everything from particle lifetime to velocity and turbulence.

Key Concepts:

Custom Shader Material: We use a ShaderMaterial to control particle appearance, such as size and color. The fragment shader includes logic to fade particles based on their age.

const ParticleShaderMaterial = new ShaderMaterial({
  uniforms: {
    color: { value: new Color('cyan') },
    pointSize: { value: 1.0 },
    dpr: { value: window.devicePixelRatio },
  },
  vertexShader: `
    attribute float age;
    varying float vAge;
    void main() {
      vAge = age;
      gl_PointSize = ...;
      gl_Position = ...;
    }
  `,
  fragmentShader: `
    varying float vAge;
    void main() {
      float alpha = 1.0 - vAge; // Fade based on age
      gl_FragColor = vec4(color, alpha);
    }
  `,
});

Particle Initialization: Particles are initialized with random positions and velocities, creating a realistic spread for the exhaust. Each particle has attributes like position, age, and size.

function initializeParticles(...) {
  const positions = [], velocities = [], ages = [], sizes = [];
  for (let i = 0; i < count; i++) {
    positions.push(...); // Set initial position
    velocities.push(new Vector3(...)); // Random velocity
    ages.push(-i / emissionRate); // Stagger particle emission
    sizes.push(size + sizeVariance * (Math.random() - 0.5) * 2);
  }
  return { positions, velocities, ages, sizes };
}

Frame Updates: Each frame, we update particle positions based on their velocity and apply gravity and turbulence. As particles age, they fade out and are reset when they reach their lifetime limit.

useFrame((state, delta) => {
  // Update particle position and age every frame
  for (let i = 0; i < config.maxParticles; i++) {
    if (ages[i] >= 1.0) resetParticle(i); // Reset expired particles
    else updateParticle(i, delta);
  }
});

Dynamic Particle Reset: When a particle’s age reaches its limit, it’s reset to a new position, velocity, and age, making it ready for the next emission cycle.

function resetParticle(index) {
  // Reset particle to new random position and velocity
  positions[index * 3] = ...;
  velocities[index] = new Vector3(...);
  ages[index] = 0;
}

Component Structure:

The particle system is rendered as a <points> mesh with buffer attributes for position, age, and size. A custom ShaderMaterial controls particle appearance and behavior.

<points visible={visible} ref={meshRef}>
    <bufferGeometry attach="geometry">
      <bufferAttribute attach="attributes-position" {...positions} />
      <bufferAttribute attach="attributes-age" array={ages} itemSize={1} />
      <bufferAttribute attach="attributes-particleSize" {...sizes} itemSize={1} />
    </bufferGeometry>
    <primitive attach="material" object={ParticleShaderMaterial} transparent />
</points>

💥 Summary - Particles:

Custom Shader Material: We use a ShaderMaterial to manage particle appearance, handling size, color, and fade effects. The particles fade based on their age, providing a realistic exhaust effect.
Particle Initialization: Each particle is randomly initialized with a position, velocity, age, and size. This randomness gives the exhaust a natural spread as the rocket moves.
Frame Updates: Every frame, the system updates particle positions based on their velocity and applies effects like gravity and turbulence. As particles age, they fade out and are reset when their lifetime ends.
Dynamic Particle Reset: When a particle expires, it’s reset with new random properties (position, velocity, etc.), ensuring continuous emission without needing to generate new particles from scratch.
Efficient Structure: The system leverages a <points> mesh with buffer attributes for efficient handling of particle data. The ShaderMaterial manages the rendering and visual effects, keeping everything performant.

🪨 SpaceRocks: Asteroids with Physics and Splitting

The SpaceRocks component brings extra life to our scene by generating asteroid-like rocks that float around and can be split upon collisions. Using Rapier for physics, these rocks bounce around, interact with the rocket, and split dynamically when hit hard enough.

Key Features:

Rock Geometry: Each rock is created using a ConvexGeometry made from random vertices. This results in irregular, rock-like shapes.

const generateRockGeometry = () => {
  const vertices: Vector3[] = [];
  for (let i = 0; i < 50; i++) {
    vertices.push(new Vector3((Math.random() - 0.5) * 3, ...));
  }
  const geometry = new ConvexGeometry(vertices);
  geometry.scale(5, 5, 5);
  return geometry;
};

Rock Splitting: When a rock collides with enough force, it's split into two smaller rocks. The splitting is handled by calculating the intersection points along a defined plane, then generating two new rocks from the original.

const splitRock = (rockGeometry: ConvexGeometry) => {
  const verticesA: Vector3[] = [], verticesB: Vector3[] = [];
  // Split the geometry along a plane
  const plane = new Plane(new Vector3(1, 0, 0), 0);
  const geometryA = new ConvexGeometry(verticesA), geometryB = new ConvexGeometry(verticesB);
  return [geometryA, geometryB];
};

Collision Handling: When a rock collides with the rocket or another object, we compute the force of the collision. If the force is above a threshold, the rock splits.

onContactForce={(payload) => {
  const forceMag = payload.totalForceMagnitude / 100000;
  if (forceMag > 80) handleCollision(key, forceVec); // Only split if the force is strong enough
}}

Rock Generation:

Rocks are randomly positioned and given velocity in a grid. They are assigned attributes like velocity, angular velocity, and the ability to split on collisions.

for (let i = 0; i < 10; i++) {
  const rockId = `${idPrefix}_rock_${i + 1}`;
  rockMap.set(rockId, {
    ref: createRef<RapierRigidBody>(),
    position: gridCells[i],
    velocity: new Vector3((Math.random() - 0.5) * 10, ...),
    geometry: generateRockGeometry(),
    canSplit: true,
    scale: 3 + Math.random() * 4,
  });
}

Component Structure:

Each rock is a RigidBody with properties such as restitution (bounciness) and friction. These rocks interact dynamically, bouncing off the environment and splitting upon impact.

<RigidBody
    ref={rock.ref}
    position={rock.position}
    linearVelocity={rock.velocity.toArray()}
    restitution={0.9} // Bouncy collisions
    friction={0.1}
    onContactForce={(payload) => handleCollision(key, forceVec)} // Handle rock splitting
>
    {/* Hull - Auto-generates mesh collider for convex geometries */}
    <MeshCollider type="hull">
    <mesh geometry={rock.geometry} scale={rock.scale}>
        <primitive attach="material" object={rockMaterial} />
    </mesh>
    </MeshCollider>
</RigidBody>

🪨 Summary - SpaceRocks:

Dynamic Geometries: Rocks are randomly generated with irregular shapes using ConvexGeometry.
Collisions and Splitting: Rocks split into smaller rocks upon high-force collisions, creating dynamic interactions.
Physics Integration: Using Rapier for realistic movement, friction, and bouncy collisions makes the rocks behave convincingly in the scene.

This system adds an extra layer of interactivity and fun as the rocket navigates through space!

🌌 SpaceEnvironment: Immersive Space Backdrop

The SpaceEnvironment component brings a dynamic backdrop to our rocket scene. It includes a starfield and a collection of planets scattered throughout space. Here’s how we built it using three.js, react-three-fiber, and shaders for custom effects.

Key Features:

Dynamic Starfield: Stars are randomly generated in a cylindrical volume (height = pageHeight) and made to twinkle with a custom shader that controls size and opacity. The stars appear to blink and fade, simulating a living, dynamic space scene.

const StarShaderMaterial = new ShaderMaterial({
  uniforms: { color: { value: new Color('white') }, opacity: { value: 0 }, time: { value: 0 }, dpr: { value: 1.0 }},
  vertexShader: `
    varying float vTwinkle; 
    uniform float time;
    void main() {
      vTwinkle = 0.5 + 0.5 * sin(time + position.x * 10.0);
      gl_PointSize = ...;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    varying float vTwinkle;
    void main() {
      gl_FragColor = vec4(color, opacity * vTwinkle);
    }
  `,
  transparent: true,
});

Instanced Planets: We use instancing to efficiently render planets at random positions within the space. Each planet has a random color, size, and location, filling the scene with variety.

const planets = useMemo(() => {
  return Array.from({ length: 20 }).map((_, index) => (
    <Instance
      key={index}
      position={getRandomInCylinder(radius, height, innerPadding)}
      scale={Math.random() * 100}
      color={planetColors[index % planetColors.length]}
    />
  ));
}, [radius, height, innerPadding]);

Rotating Space Environment: The entire space environment rotates slowly, making the stars and planets appear to move in the background.

useFrame((state, delta) => {
  environmentRef.current.rotation.y += delta * 0.015;
  StarShaderMaterial.uniforms.time.value = state.clock.getElapsedTime();
});

💡 Quick Tip: Using `window.devicePixelRatio` for Consistent Shader Rendering

When working with shaders that involve point size (like stars in a starfield), it’s crucial to account for varying screen resolutions and pixel densities. By incorporating window.devicePixelRatio, you ensure that your shader adjusts to different screens, maintaining consistent rendering across devices.

Here's how we applied this:

const StarShaderMaterial = new ShaderMaterial({
  uniforms: {
    dpr: { value: window.devicePixelRatio }, // Ensures consistent point size across devices
  },
  vertexShader: `
    uniform float dpr;
    void main() {
      gl_PointSize = gl_PointSize * dpr; // Adjust point size by device pixel ratio
    }
  `,
});

Reminder: Always update the dpr value in your useFrame or relevant hook when screens change, like dragging your window across monitors with different resolutions!

useFrame(() => {
  StarShaderMaterial.uniforms.dpr.value = window.devicePixelRatio;
});

Component Structure:

The stars and planets are rendered inside a <group> element. Stars are rendered using <points>, while planets are created using Instances for efficient rendering.

<group>
  {/* Instanced stars */}
  <points position={[0, 0, 0]}>
    <bufferGeometry>
      <bufferAttribute attach="attributes-position" {...stars} />
    </bufferGeometry>
    <primitive attach="material" object={StarShaderMaterial} />
  </points>

  {/* Instanced planets */}
  <Instances limit={100} material={PlanetMaterial}>
    <sphereGeometry args={[1, 32, 32]} />
    {planets}
  </Instances>
</group>

🌌 Summary - SpaceEnvironment:

Dynamic Starfield: Twinkling stars scattered randomly in a cylindrical space add life to the environment.
Instanced Planets: Randomly positioned and scaled planets provide variety and depth to the scene.
Rotating Environment: Slow rotation of the entire backdrop makes space feel vast and alive.
Smooth Transitions: Stars and planets fade in and out seamlessly when the environment becomes visible or hidden.

This space environment creates an immersive, dynamic backdrop for the rocket's adventure, contributing to the overall feeling of motion and depth in the scene.

🏎️ Performance Boosts: Optimizing for Smooth Rocket Experience

For an interactive experience like our rocket scene, keeping performance top-notch is critical—especially when dealing with 3D rendering and physics calculations. Let’s explore how we squeezed out those extra frames and kept things smooth:

🚀 1. Frame Loop Control: "Always" vs. "Demand"

To prevent unnecessary GPU usage when the rocket isn’t in view, we created a trigger element just below the content on the webpage. This switch toggles the frame loop between "always" and "demand", ensuring the browser only re-renders when needed.

"Always": Used when the rocket is visible (scrolled into view) or animating, ensuring buttery-smooth performance.
"Demand": Used when the rocket is idle and not in view, meaning the scene only re-renders when a specific event occurs.

This technique helps reduce GPU strain and optimizes battery usage for mobile and laptop users.

<Canvas frameloop={isRocketVisibleOrFlying ? 'always' : 'demand'} />

🚀 2. Custom `useViewportSize` Hook

We opted for a custom useViewportSize() hook to track viewport changes without triggering excessive re-renders. While useThree()'s { viewport/size } would cause rerenders on every scroll, we throttle viewport size checks to avoid performance hits.

const useViewportSize = () => {
  const [size, setSize] = useState(null);

  useFrame((state) => {
    if (state.clock.elapsedTime % throttleTime > 0.01) return;

    const { width, height } = state.size;
    if (!size || size.width !== width || size.height !== height) {
      setSize({ width, height });
    }
  });

  return size;
};

🚀 3. Mesh Instancing for Planets

For efficiency, we used mesh instancing to handle the rendering of planets. Instancing allows you to render multiple copies of a geometry while reusing the same material, which drastically reduces the overhead of drawing each individual planet in the scene.

<Instances limit={100} material={PlanetMaterial}>
  <sphereGeometry args={[1, 32, 32]} />
  {planets}
</Instances>

🚀 4. Using Refs for Non-Rerender Values

When dealing with dynamic updates inside the useFrame() loop, we stored frequently changing values (like positions or velocities) in Refs. This way, we can manipulate them directly without triggering component rerenders, which saves CPU cycles.

🚀 5. General React-Three-Fiber Performance Tips

Lastly, we adhered to best practices from the React Three Fiber docs to avoid performance pitfalls. Some of these include:

Avoid excessive use of useFrame() unless absolutely necessary.
Batch updates by using setState() sparingly inside animation loops.
Minimize new object creation inside loops to prevent garbage collection.

For more advanced performance tips, be sure to check out the official React Three Fiber pitfalls guide and performance optimization tips.

💡 Quick Tip: Canvas Size Limits on Some Devices

When working with large canvases, remember that some devices (like Android Chrome and Firefox on Desktop) have size limitations that may not render properly if the canvas height exceeds 4096px. Always account for these limitations and consider dynamic scaling or feature disabling for large viewports!

if (height > 4096 && browserName === 'Firefox' && isDesktop) {
  setSize(null);
  return;
}

By implementing these performance tweaks, we ensured a smooth, immersive experience without bogging down users' devices—whether they’re on mobile or desktop. 🖥️📱

🚀 Wrapping it Up: The Final Countdown

Celebrating our 1,000 followers on LinkedIn with this interactive 3D rocket has been an absolute blast! From building a dynamic, mouse-controlled rocket to adding splitting space rocks, twinkling stars, and performance optimizations—this project has truly been a fun journey.

It’s projects like these that remind us why we love what we do: blending creativity, tech, and a little bit of rocket science (okay, a lot of rocket science). We hope you enjoyed reading about how we put it all together and maybe even picked up a few tips for your own interactive web projects.

Feel free to check out the live rocket Easter egg on zerodays.dev and, of course, keep an eye out for more interactive fun as we continue to build cool things and push the boundaries of what’s possible in web development.

Here’s to the next milestone—and maybe, the next rocket! 🚀

Thanks for reading and following along!

Forem: Tim Vučina

A Developer's Brush Stroke

The Artist in a Factory

The Role of the Founder (and the Power of Care)

Chasing the Right Kind of Win

On Passion (Without Saying 'Passion')

The Myth of Roles and the Power of Human Wholeness

On Chaos (and Why I Don't Fear It)

Closing – A Quiet Note

🧩 Beyond the Popup: Crafting Next-Level Chrome Extensions with CRXJS

1. The Magic of Chrome Extensions ✨

2. Choosing Your Stack: The Right Tools for the Job 🛠️

Popular Choices for Extension Development:

3. The Unique Challenges & Superpowers of Extension Development 🔥

The Good: Browser APIs That Supercharge Your Extension 🚀

The Bad: Common Pitfalls & Limitations 😬

The Ugly: Bad Practices That Can Doom Your Extension ❌

4. Bridging the Gap: Messaging Between Popup & Content Scripts 🔄

How We Handle Messaging in Classmate ⚡

Message Structure & Commands

Sending Messages to the Active Tab

Listening for Messages

The Result? A Seamless Experience 🎯

5. CRXJS: The Modern Way to Build Chrome Extensions ⚡

Why CRXJS?

Setting Up CRXJS in Your Project 🚀

Efficiency and Simplicity 🏆

6. Our Journey: How We Built Classmate 🏆

🚀 Building an Interactive 3D Rocket Easter Egg with React Three Fiber

🚀 Table of Contents:

🏁 The Setup:

🛠️ Tools to Build Our 3D Rocket

🎬 Setting Up the 3D Scene

🎥 Camera Choice: Why We Went with Orthographic

💡 Quick Tip: Handling Events with eventSource

🚀 The Main Actor: Our Interactive Rocket

Key Features:

Here’s a key snippet:

Rocket Following Movement: Keeping Track of the Mouse

Key Points:

Here’s a simplified version of how we achieve this:

💡 Quick Tip: Handling Events on <group>

🚀 Summary - Rocket:

💥 Particle System: Fueling the Rocket’s Exhaust

Key Concepts:

Component Structure:

💥 Summary - Particles:

🪨 SpaceRocks: Asteroids with Physics and Splitting

Key Features:

Rock Generation:

Component Structure:

🪨 Summary - SpaceRocks:

🌌 SpaceEnvironment: Immersive Space Backdrop

Key Features:

💡 Quick Tip: Using window.devicePixelRatio for Consistent Shader Rendering

Component Structure:

🌌 Summary - SpaceEnvironment:

🏎️ Performance Boosts: Optimizing for Smooth Rocket Experience

🚀 1. Frame Loop Control: "Always" vs. "Demand"

🚀 2. Custom useViewportSize Hook

🚀 3. Mesh Instancing for Planets

🚀 4. Using Refs for Non-Rerender Values

🚀 5. General React-Three-Fiber Performance Tips

💡 Quick Tip: Canvas Size Limits on Some Devices

🚀 Wrapping it Up: The Final Countdown

💡 Quick Tip: Handling Events with `eventSource`

💡 Quick Tip: Handling Events on `<group>`

💡 Quick Tip: Using `window.devicePixelRatio` for Consistent Shader Rendering

🚀 2. Custom `useViewportSize` Hook