Ignite the Magic!

Hi, I’m Julibe, and I Craft Digital Experiences!

Whatsapp Facebook Twitter Dribbble Instagram Envelope

Haunt Me!

Contact Me!

The Pillars 🚀 Behind Crafting Digital Experiences

Julibe Pillars – 001
An interactive audio-visual journey breaking down the Pillars philosophy of Cognitive Clarity, Responsible AI, and Organic Growth.
Julibe
julibe #julibe #DigitalPhilosophy #ResponsibleAI #CognitiveClarity #GamificationStrategy #UXPhilosophy #NoMoreBoringWeb #OrganicGrowth #WebAudio #CreativeDev #Storytelling #foryou
👻🗣️ 🧠 🎮 🤖 🔊 ❤️ ✨ 🛑 📢 🚀👻

The Pillars Behind Crafting Digital Experiences

v. 1.0.0

Experience the Pillars

The Human Experience, The Smart Experience.

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.

A New Philosophy

The web is drowning in a sea of digital noise. Cookie-cutter templates and aggressive pop-ups have turned the internet into a chaotic storm of distraction. This project is the antidote. It is a living, breathing philosophy transformed into an interactive journey, designed to rescue brands from obscurity and deliver true value.

Four Core Pillars

This immersive audio-visual experience breaks down the specific methodology needed to create high-impact digital products. We explore UX Design for Cognitive Clarity, Responsible AI for Creative Acceleration, and Gamification to capture Cognitive Real Estate. It creates a structured, narrative space to explore the principles that define modern digital craftsmanship.

Experiencing the Vision

Powered by a custom storytelling engine, this experience does not just tell you what good design is; it shows you. With beautifully synced audio narration and a dynamic, fluid background that reacts to your every move, it proves that treating users with respect makes them stay, listen, and connect.

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.

Difficulty: medium
Value: ~ $450 to $3.100 USD
Details
Minimum
Value: $450
Maximum
Value: $3.100

Duration: ~ 1 to 3 Weeks
Details
Minimum
Hours: 10
Days: 1
Maximum
Hours: 100
Days: 13
Weeks: 3
Value: ~ $160 to $1.100 USD
Details
Minimum
Value: $160
Maximum
Value: $1.100

Duration: ~ 1 to 4 Days
Details
Minimum
Hours: 5
Maximum
Hours: 30
Days: 4
Value: ~ $90 to $630 USD
Details
Minimum
Value: $90
Maximum
Value: $630

Duration: ~ 0 to 3 Days
Details
Minimum
Hours: 3
Maximum
Hours: 20
Days: 3
Value: ~ $120 to $840 USD
Details
Minimum
Value: $120
Maximum
Value: $840

Duration: ~ 1 to 4 Days
Details
Minimum
Hours: 4
Maximum
Hours: 30
Days: 4
Value: ~ $30 to $180 USD
Details
Minimum
Value: $30
Maximum
Value: $180

Duration: ~ 0 to 1 Day
Details
Minimum
Hours: 1
Maximum
Hours: 6
Value: ~ $50 to $350 USD
Details
Minimum
Value: $50
Maximum
Value: $350

Duration: ~ 0 to 1 Day
Details
Minimum
Hours: 2
Maximum
Hours: 10
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

  1. Select Your Language: Choose English or Español at the loading screen.
  2. Navigate the Pillars: Use the sidebar dots or top navigation to jump between Intro, UX, AI, and Gamification.
  3. Deep Dive: Click the “Read More” or “Listen” buttons on any card to open the immersive modal.
  4. Listen & Watch: Let the audio guide you. The text will highlight and slides will change automatically as the narration flows.

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

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:

  1. UX Design (User Experience): Moving beyond “pretty” to achieve Cognitive Clarity.
  2. Responsible AI: Rejecting lazy automation in favor of Augmented Intelligence and Creative Acceleration.
  3. Gamification: Turning passive 3-second glances into minutes of Cognitive Real Estate.
  4. 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

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:

The Game-Plan!

Plotting a safe course through the scary maze! 🧭

  • 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.
  • 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.

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.

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.

  • 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.

  • 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).
  • 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.
Experience the Pillars
Julibe Pillars - 001
Julibe Pillars - 002
Julibe Pillars - 003
Julibe Pillars - 004
Julibe Pillars - 005
Julibe Pillars - 006
Julibe Pillars - 007

* Pricing, timelines, content, and designs are subject to change without prior notice.
Certain projects or aspects displayed are presented for demonstration purposes only and may include partial or placeholder content, conceptual work and/or early-stage ideas, and may not reflect the final delivered product.

* All values provided are preliminary estimates based on the scope that similar projects may present.
These are intended for general reference only and should not be considered final or binding figures.

More spooktastic codes ready to ignite your curiosity!

Arqiv - 001

Arqiv👁️‍🗨️Visual Echoes

Embark on a grand quest through Arqiv! Uncover a split-screen artifact that turns mere scrolling into an epic storytelling adventure.
View More!
Private Collector - 002

The Private Collector 🖼️ A Sanctuary of Rare Narratives

Step into The Private Collector's sanctuary, a meticulously curated digital gallery. Suspend time and experience visual narratives of unparalleled provenance.
View More!
Aeryn - 001

Aeryn Studio 🎨The Radical Painting

Fire up your dial-up and grab your mouse! Aeryn Studio is the raddest MS Paint clone on the Web. Layers, pixels, and pure 90s bitmap glory await!
View More!
Keep Up to Date? Sure, it's cool! No thanks, I'm afraid