Interfaces Are Never Neutral

The maincode website is an interface-level embodiment of our mindset: fast, experimental, and focused on what matters. It reflects a culture where code is choreography, research thrives in motion, and the frontend isn't the endpoint—it's the entry point.

In this piece, I break down my process for merging frontend engineering, narrative design, and strategic branding into a website that boldly and genuinely embodies Maincode’s philosophy.

Why Build Anything From Scratch in 2025?

Because prefab structures embed assumptions, and assumptions shape outcomes. Templates, UI kits, and component libraries excel for conventional products. However, Maincode isn't pursuing conventional paths. As an AI research lab pioneering frontier technologies, our interfaces must not merely communicate—they must actively explore.

Interfaces encode values—through structure, motion, and restraint. Design always says something.

Research in interface design consistently shows that design choices shape user cognition and interaction models (Norman, 2013; Johnson & Henderson, 2012). At Maincode, we consciously leverage this, ensuring our interfaces express our unique perspective.

Once the decision to build from scratch was made, the next question became clear: what tools best support our intentions?

Tech Stack as Design Intent

Choosing React and Tailwind CSS wasn’t just pragmatic—it aligned perfectly with our design engineering values: iterate fast, experiment deeply, discard freely. React’s modularity let us build and iterate on concepts without hesitation. And using Tailwind enabled rapid visual experimentation removing the overhead of traditional styling layers.

When it came to motion and dimensionality, Three.js and our custom-built shaders gave us raw expressive power—letting us shape light, texture, and space with precision. Motion.dev gave us frame-level timing control, allowing animations to carry narrative weight. These weren’t just tools—they were instruments, enabling us to compose with intention.

Design theorists argue that technology choices significantly influence creative outcomes (Fry, 2009). By intentionally choosing tools such as Motion.dev, Three.JS and Tailwind CSS it grant us raw expressive power, we embed our core values directly into the user experience.

The clearest example of our philosophy-in-motion is the homepage’s hero section. Our hero animation—a particle mesh influenced by simplex noise—is more than visual branding. It's a conceptual signal, representing the intersection of AI systems thinking, creative design sensibility, and technical research rigour. This aligns with research emphasising that symbolic representation in interfaces profoundly affects user perception and engagement (Ware, 2012).

With our tools chosen, we crafted visual metaphors—not decorative, but deeply symbolic.

Visual Language of Thought:

• Collider-style orb: symbolises creative collisions.
• Neural nets: represent structured exploration of ideas.
• Synapses: signify breakthroughs as behaviours.
  

Every visual element carries symbolic weight—it’s how we embed meaning into experience.

Symbolism alone isn’t enough—our visuals had to perform. That led us directly into iterative experimentation.

Building as Research

The process was inherently experimental and iterative—constraints changed, narratives evolved, but the core intention persisted: create something expressive and coherent.

Late-night shader experiments and cross-browser challenges were part of this essential process. A detailed 3D brain looked impressive but slowed performance. A simpler network of synapses communicated our concept clearer—and faster. Simplifying wasn’t compromise—it was clarity. This decision reflects the design principle that simpler representations often communicate meaning more clearly than high-fidelity, realistic visuals (Tversky, 2011).

Visual clarity often improves when you reduce representational fidelity. Simpler = more semantically precise in interface design.

With visual clarity established, the next layer became motion—our structured language of interaction.

Motion as structured communication

Our animations aren’t decorative—they’re visual arguments designed with intent. Scroll-snaps pace attention. Glitch animations hint at mystery. Particles suggest systemic complexity. Each motion is a temporal argument. Motion, understood as a temporal medium, becomes a powerful method of cognitive engagement, a concept well-documented in interaction design literature (Chang et al., 2018).

Mood-boards and prototypes began in Figma, iterated upon in real-time with code, AI-assisted tuning, and visual reasoning—an example of integrating advanced AI copilots like Claude and Gemini into design workflows. This approach aligns with research underscoring the importance of iterative, AI-augmented processes in contemporary design engineering (Yang et al., 2023).

The interface is a temporal surface, where motion isn’t just visual—it’s cognitive. It shapes how our users think and feel.

Applied frontend engineering

The frontend isn’t just the surface. It’s the space where our philosophy becomes interaction. Our site isn’t just pixels and code—it’s an active narrative surface. Pixel perfection matters less than philosophical coherence.

Contemporary design theory highlights how ideas and values can become concrete experiences through deliberate design choices (Forlizzi & Battarbee, 2004). This is exactly what we're doing at Maincode—turning our philosophy into tangible and engaging experiences.

What We’re Signalling

This isn’t just a website; it’s an intentional filter. Maincode seeks polymaths who obsessively pursue depth, detail, and purposeful friction. If this resonates—if our obsession feels like yours—perhaps Maincode already feels like home.

We’re not hiring casually. We’re assembling the next generation of design engineers, applied researchers, dreamers and makers.

References:

• Norman, D. A. (2013). The Design of Everyday Things. Basic Books.
• Johnson, J., & Henderson, A. (2012). Conceptual Models: Core to Good Design. Morgan & Claypool Publishers.
• Fry, B. (2009). Visualizing Data. O'Reilly Media, Inc.
• Ware, C. (2012). Information Visualisation: Perception for Design. Elsevier.
• Tversky, B. (2011). Visualizing Thought. Topics in Cognitive Science.
• Chang, A., et al. (2018). Animation: Can It Facilitate? International Journal of Human-Computer Interaction.
• Yang, Q., et al. (2023). AI-Augmented Design Processes. ACM Transactions on Computer-Human Interaction.
• Forlizzi, J., & Battarbee, K. (2004). Understanding Experience in Interactive Systems. Proceedings of DIS 2004.