I Had 24 Hours, Zero Templates, and a Vision. Here's What I Built.

The story of an interactive 3D orb, a terminal that talks back, and why I stopped settling for "good enough."

Disclaimer: This article was written with the help of AI, transforming my scattered development notes into a coherent narrative. The project, the code, the design decisions… those are all mine.

It Started With Frustration

I’ve built websites for clients that generated millions in revenue. Enterprise dashboards. AI platforms. The works.

But when I looked at my own company’s website? It was… fine. Functional. Forgettable.

That’s the trap, isn’t it? We give our best work to everyone else.

Today, I decided that was over. I gave myself 24 hours. No templates. No shortcuts. Just me, a blank editor, and a single question:

What if a website could feel alive?

The Problem With “Professional” Websites

Every tech company website looks the same. Hero section with gradient background. Stock photo of diverse people pointing at a laptop. Three-column feature grid. Contact form that feels like filling out a tax return.

It’s visual white noise. Users scroll, glaze over, leave.

I wanted something different. Something that would make a developer pause mid-scroll and think, “Wait, how did they do that?”

Something that would make a potential client feel like they were already experiencing what we could build for them, or something better than what they were expecting.

The 3D Orb That Took 3 Hours

The hero section needed a centerpiece. Not an illustration. Not a video. Something interactive.

I envisioned a floating orb: layered hexagons rotating in 3D space, responding to the user’s cursor, surrounded by orbiting code snippets. It would breathe. It would react. It would make people want to play with it.

The first version looked like a spinning loading icon from 2005.

The second version made my browser crash.

The third version… something clicked.

I realized I didn’t need WebGL or Three.js. I could fake convincing 3D with pure CSS transforms and clever math:

const rotateX = (mouseY — 0.5) * 30 * rotationSpeed
const rotateY = (mouseX — 0.5) * 30 * rotationSpeed

Suddenly, the orb was alive. It tracked my mouse. The layers rotated at different speeds, creating depth. Twelve particles floated around it, each moving independently. Code snippets: async/await, docker run, SELECT *, orbited like satellites.

300 lines of code. Zero external dependencies. 60 frames per second.

When I added the click ripple effect, I actually whispered “yes” to myself in an empty room.

Turning a Contact Form Into a Conversation

Forms are transactional. You input data. You click submit. You wait.

But what if a form told a story?

I built the contact form as a terminal interface. When you start, you see:

> fazper init — contact
> Initializing secure connection…
> Enter your name: _

Each field appears one at a time, like commands executing in sequence. Your responses become part of the terminal output. When you submit:

> Encrypting payload with AES-256…
> Dispatching to Fazper engineering team…
████████████████████ 100%
> Request ID: lx7k9m2 generated
> Status: SUCCESS
> < 24 hour Response ETA

It’s still a form. It still collects the same information. But now it feels like something is happening. Like you’re interfacing with a system, not filling out a spreadsheet.

316 lines of state management. Seven distinct states. One seamless experience.

A friend tested it and said, “I actually wanted to fill this out.” That’s when I knew it worked.

The Details Nobody Notices (But Everyone Feels)

Great experiences are built on invisible decisions.

The scroll animations: I wrote a custom component with six animation variants. Elements fade up, scale in, blur into focus. But only once. Only when you first see them. The IntersectionObserver disconnects after triggering because wasted resources are wasted experiences.

The color system: I used OKLCH, a perceptually uniform color space. Most developers haven’t heard of it. But it’s why the gradients feel natural and the dark mode doesn’t look like an afterthought.

The sticky header: It starts transparent. As you scroll, it gains a frosted glass effect. The transition is 300ms with ease-out timing. You don’t notice the header. You notice that the site feels polished.

The stats counter: Numbers animate from zero to their target over two seconds. But only when the section enters your viewport. It’s a small dopamine hit. “500+ projects delivered” feels more real when you watch it count up.

The Stack (For the Curious)

• React 19.2.0: Yes, the latest. It works.

• Next.js 16: App Router, server components where they make sense.

• TypeScript: Strict mode. Non-negotiable.

• Tailwind CSS v4: With OKLCH color functions.

• Zero animation libraries: Just requestAnimationFrame and IntersectionObserver.

The entire site is fast because I refused to add dependencies I didn’t need.

What 24 Hours Taught Me

1. Constraints unlock creativity: No WebGL meant I had to invent solutions. The orb exists because I couldn’t take the easy path.

2. Details compound: One smooth animation is nice. Fifty coordinated micro-interactions create magic.

3. Build for yourself like you build for clients: We give clients our best work but showcase ourselves like leftovers. That’s hypocrisy.

4. “Good enough” is the enemy: Every tech company has a website. Almost none of them are memorable. The gap between forgettable and remarkable is smaller than you think. It just requires giving a damn.

The Real Reason I’m Sharing This

I could have kept this as just another portfolio piece. But here’s what I’ve learned after years of building:

The best marketing is proof.

You can say you build exceptional software. Or you can show it.

Every hover effect, every animation, every line of code on the Fazper website is a demonstration. If we obsess over details on our own site, imagine what we build when someone’s paying us.

One Last Thing

After I deployed, I sat back and just… scrolled. Watched the orb respond to my mouse. Stepped through the terminal form. Let the animations cascade.

For the first time in a long time, I felt proud of something I built for myself.

If you’re a developer reading this: build something tonight that isn’t for a client, isn’t for money, isn’t for anyone’s approval. Build it because you want to see if you can.

That’s how you remember why you started.

Fazper LLC builds AI solutions, custom software, and data platforms for companies who refuse to settle. If our contact form is this thoughtful, imagine what we’ll build for you.

Visit fazper →