Julibe’s Design Philosophy: rejecting “AI slop” and boring interfaces.
Explore the four pillars—UX, AI, Gamification, and Design—that turn passive users into loyal fans.
The Human Experience, The Smart Experience.
Home / The Pillars 🚀 Behind Crafting Digital Experiences
In a nutshell...
The "Too Long; Or too scary??? Anyway don't Wanna Read" version... 🔮
This is an interactive 3D Philosophy that explains how I build digital products. It breaks down my four obsessions: UX Design (making it usable), Responsible AI (making it smart), Gamification (making it fun), and Design (making it beautiful).
Technically, it’s a showcase of modern, framework-free JavaScript. It features a custom audio-sync engine that matches voiceover to text slides in real-time and a performant Three.js background that reacts to your journey.
Basically? It’s a website that talks to you, looks cool, and explains why your next project needs a human touch.
About
Thinking about building something similar?
These estimates will give you a clear picture of the technical scope, development timeline, and investment required to turn the idea into an awesome reality.
Big results start with clear information and smart decisions.
Total Value
A standout value you can’t miss:
Value: ~ $1.800 to $3.600 USD
Details
Minimum
Value: $1.800
Value: $1.800
Maximum
Value: $3.600
Value: $3.600
An unbeatable turnaround:
Duration: ~ 2 to 3 Weeks
Details
Minimum
Hours: 60
Days: 8
Weeks: 2
Hours: 60
Days: 8
Weeks: 2
Maximum
Hours: 120
Days: 15
Weeks: 3
Hours: 120
Days: 15
Weeks: 3
Concept
A great deal packed with value:
Value: ~ $620 to $1.300 USD
Details
Minimum
Value: $620
Value: $620
Maximum
Value: $1.300
Value: $1.300
A swift and smooth schedule:
Duration: ~ 3 to 1 Week
Details
Minimum
Hours: 20
Days: 3
Hours: 20
Days: 3
Maximum
Hours: 40
Days: 5
Weeks: 1
Hours: 40
Days: 5
Weeks: 1
Design
A standout value you can’t miss:
Value: ~ $370 to $740 USD
Details
Minimum
Value: $370
Value: $370
Maximum
Value: $740
Value: $740
A great schedule packed with efficiency:
Duration: ~ 1 to 3 Days
Details
Minimum
Hours: 10
Days: 1
Hours: 10
Days: 1
Maximum
Hours: 20
Days: 3
Hours: 20
Days: 3
Coding
A powerful value at a friendly price:
Value: ~ $500 to $990 USD
Details
Minimum
Value: $500
Value: $500
Maximum
Value: $990
Value: $990
An incredible turnaround:
Duration: ~ 3 to 4 Days
Details
Minimum
Hours: 20
Days: 3
Hours: 20
Days: 3
Maximum
Hours: 30
Days: 4
Hours: 30
Days: 4
Testing
A powerful value at a friendly price:
Value: ~ $100 to $210 USD
Details
Minimum
Value: $100
Value: $100
Maximum
Value: $210
Value: $210
A stellar schedule:
Duration: ~ 0 to 1 Day
Details
Minimum
Hours: 3
Hours: 3
Maximum
Hours: 7
Hours: 7
Polishing
A smart choice with awesome value:
Value: ~ $210 to $410 USD
Details
Minimum
Value: $210
Value: $210
Maximum
Value: $410
Value: $410
A brilliantly estimated time:
Duration: ~ 1 Day
Details
Hours: 10
Days: 1
Days: 1
Don’t let the numbers scare you, let’s talk!
The Juicy Details!
All treats, no tricks, just the sweet facts! 🍭
Stop contributing to the noise. Start creating meaning.
We are drowning in a sea of digital noise.
“AI slop,” cookie-cutter templates, and aggressive pop-ups have turned the web into a chaotic storm of distraction.
This project is my answer to that chaos. It is a Philosophy in code
Instructions
- Select Your Language: Choose English or Español at the loading screen.
- Navigate the Pillars: Use the sidebar dots or top navigation to jump between Intro, UX, AI, and Gamification.
- Deep Dive: Click the “Read More” or “Listen” buttons on any card to open the immersive modal.
- Listen & Watch: Let the audio guide you. The text will highlight and slides will change automatically as the narration flows.
Inspiration
The specific spark for this project was born from a deep, collective frustration with the modern web (circa 2023-present). Browsing had started to feel like wandering through a sterile corporate labyrinth filled with pop-ups and hollow, automated content. I wanted to build something that fundamentally rebelled against that norm. Visually, the design pulls heavy inspiration from the glowing, data-rich environments of 90s sci-fi masterpieces like Ghost in the Shell and the breathtaking, cinematic UI of recent narrative games like Nobody Wants to Die. I needed the interface to feel vast, neon-drenched, and alive!
To make it truly engaging, I looked back at my lifelong love for gaming. Having been a pro at hitting “game over” screens since the 16-bit era, I’ve always appreciated how immersive games use discoverable audio logs to let players unfold the story at their own pace. I wanted to bring that exact tactile, exploratory feeling straight into the browser, replacing the traditional wall of text or the unskippable corporate video with something inherently playful.
The unique twist that separates this from a standard Awwwards portfolio piece is the horizontal audio-scrubbing mechanic mapped directly to the bounding rectangle of the modal. Instead of a linear timeline, your mouse movement controls the flow of time and the voiceover itself. It transforms a static design manifesto into a literal playground—handing total control back to the user and turning passive reading into an unforgettable digital experience!
“Good design is actually a lot harder to notice than poor design, in part because good design fits our needs so well that the design is invisible.” — Don Norman
“Design is not just what it looks like and feels like. Design is how it works.” — Steve Jobs
“The real danger is not that computers will begin to think like men, but that men will begin to think like computers.” — Sydney J. Harris
“Machines have calculations. We have understanding. Machines have instructions. We have purpose. Machines have objectivity. We have passion.” — Garry Kasparov
“You can discover more about a person in an hour of play than in a year of conversation.” — Plato (Often attributed to Plato, foundational to Gamification)
“Play is our brain’s favorite way of learning.” — Diane Ackerman
Project Overview
This isn’t just a portfolio; it’s a breakdown of the specific methodology I use to rescue brands from obscurity. It creates a structured, narrative space to explore the Four Core Pillars that define modern, high-impact digital products:
- UX Design (User Experience): Moving beyond “pretty” to achieve Cognitive Clarity.
- Responsible AI: Rejecting lazy automation in favor of Augmented Intelligence and Creative Acceleration.
- Gamification: Turning passive 3-second glances into minutes of Cognitive Real Estate.
- Design: Ensuring the visual language speaks with Emotional Resonance.
I built this because I was tired of seeing companies scream louder to get attention, only to be ignored. I wanted to prove that if you treat users with respect—giving them clarity, story, and genuine value—they don’t just stay; they listen.
“People should not have to think while using your UI. They should just know!” — Julibe
Theory
The core philosophy here is “Anti-Noise.”
The web used to be about discovery; now it’s about distraction. To combat this, I draw upon the concepts of Cognitive Load Theory and Ethical Design.
- Cognitive Clarity: We strip away the “labyrinths” and “mazes” of modern web design. If a user is confused, they leave. If they feel smart, they stay.
- Organic Data: In an era of privacy fears, we stop extracting data and start exchanging value for it. We build trust by asking, not taking.
- Responsible AI: We address the “AI Fatigue” directly. Users can smell “fake” content. This project argues for using AI to handle the grunt work so humans can focus on Empathy, Taste, and Soul.
Relevant foundational concepts:
- Cognitive Load Theory – Why simple wins.
- Humane by Design – Designing for digital well-being.
- The Gamification Framework – Why fun matters.
- Privacy by Design – The basis for “Organic Data.”
- Don’t Make Me Think – The UX Bible.
The Game-Plan!
Plotting a safe course through the scary maze! 🧭
Challenges
- The “AI Slop” Perception: How do we talk about using AI without sounding like just another “ChatGPT wrapper”?
- Attention Span: Users today give you 3 seconds. How do we convince them to listen to a 2-minute audio story?
- Complex Concepts: Explaining “Adaptive Ecosystems” or “Organic Data” can easily become boring academic lectures.
- Language Barriers: Ensuring the emotional weight of the Philosophy hits equally hard in both English and Spanish.
Solutions
- Synced Audio Storytelling: We don’t ask the user to read walls of text. We narrate it to them. The text highlights in karaoke-style sync, keeping their eyes focused and their brain engaged.
- Gamified Discovery: We practice what we preach. We use Gamification mechanics (interactive 3D, progress tracking, “unlocking” content) to keep the user exploring.
- Bilingual Architecture: The system was built from the ground up to support instant language switching without reloading, ensuring the message reaches a global audience.
Impact
This project transforms the abstract concept of “hiring a developer” into a tangible demonstration of value. By immersing the visitor in the mindset of the creator, it filters for clients who value quality and depth.
It improves the onboarding workflow by answering the question “How do you work?” before it’s even asked. It creates a measurable increase in engagement time—moving from the industry standard 3-second glance to minutes of interaction. It proves that Cognitive Real Estate is the most valuable asset in the digital economy.
Scope
The project includes a fully responsive landing page, a real-time 3D background, a custom audio player with slide synchronization, and dual-language support (EN/ES). It covers the four specific narrative pillars.
It intentionally avoids backend databases or user login systems. It is designed as a stateless, client-side experience to ensure maximum speed and privacy. It does not track user data beyond basic analytics—practicing the “Organic Data” philosophy it preaches.
Credits
- Three.js: The backbone of our 3D reality.
- Font Awesome: For the UI icons.
- Google Fonts: For the ‘Space Grotesk’ and ‘Bebas Neue’ typefaces.
- CodePen: The sandbox where this idea was born.
The Nerd Stuff!
I think we are going to need a bigger boat... ahem, I meant cauldron! ✨
JavaScript, Three.js, Web Audio API, Intersection Observer API
The core of this application is a bespoke engine that bridges the DOM (Document Object Model) with the WebGL canvas. It uses an event-driven architecture where UI interactions (clicks, scrolls) dispatch signals that the 3D scene and audio player listen to.
Improvements
- Spatial Audio: Implementing 3D positional audio so the voice moves relative to the active “pillar” on screen.
- Gamepad Support: Adding the Gamepad API to allow users to navigate the 3D menu using a controller, leaning harder into the “Gamification” pillar.
- WebGL Post-Processing: Adding bloom or film grain effects to the Three.js scene for a more cinematic look (performance permitting).
Known Bugs
- Autoplay Restrictions: On some mobile browsers, the audio cannot start automatically without an explicit first touch interaction (handled via a “Start” overlay, but can be sticky on iOS Low Power Mode).
- High-Refresh Rate Monitors: The particle animation speed might need clamping on 144Hz+ displays to ensure consistent visual pacing.
Ghostly Connections: I am on these spooky social networksGhostly Connections: I am on these spooky social networks