Loading
How sci-art aesthetics and purposeful motion create a living portfolio experience.
Most design systems start with a mood board. Exira-X started with a question.
What does it feel like to stand at the edge of what we understand? Not the comfortable edge — the real one. Where physics gets strange, where AI behavior stops being explicable, where a simulation produces something its creator didn't intend. That sensation of being simultaneously certain and uncertain — grounded in method, hovering over an abyss of not-knowing.
That's what I wanted the design to feel like. Every decision — color, motion, type, spacing — is an attempt to make that sensation legible without explaining it. The moment you explain a feeling, it stops being a feeling and becomes a description of one. Design's job is to produce the experience directly.
Design's only job: Produce the experience directly. The moment you explain a feeling, it stops being a feeling and becomes a description of one.
Spring-driven interactions carry momentum; short color and opacity changes should stay quiet and immediate.
The most important design decision wasn't a color choice or a type pairing. It was a cosmological one.
The observable universe — everything you can see, measure, and touch — accounts for roughly 5% of what exists. The remaining 95% is dark matter and dark energy: we know it's there because of how it shapes the behavior of visible matter, but we have no idea what it actually is. We have never detected it directly. We may never detect it directly. It governs everything and is invisible to everything we've built.
This duality is not a theme I applied to the design. It is the structure the design emerged from. Two modes, two physics, two ways of standing in the universe.
Light mode is the physics you can hold in your hands. Dark mode is the physics that holds everything else up without announcing itself.
When you switch between modes, you are not changing a preference setting. You are changing which side of the universe you are standing on. Whether the user knows this or not is irrelevant — what matters is whether they feel it. A design choice that requires explanation has already partially failed. The best choices land before the explanation arrives.
Here is something that bothers me about most web animation: it uses easing curves.
Ease-in, ease-out, cubic-bezier — these are polynomial approximations of how things should move if physics were convenient and frictionless and the world were made of smooth gradients. But real objects don't ease. They oscillate. They overshoot. They settle through dampening as energy dissipates into the medium. A spring reaches equilibrium. It does not slide to a stop on a schedule.
Exira-X reserves spring physics for interactions where momentum communicates state. Short color, opacity, and focus changes use restrained CSS timing instead; not every transition needs to perform.
// Spring config for interactions where momentum carries meaning
const springConfig = {
type: "spring",
stiffness: 280,
damping: 22,
mass: 0.8,
};
// No duration. No bezier. The physics determines when it stops.The living simulations and spatial transitions carry momentum and settle naturally; card borders and color changes stay quick and quiet. That hierarchy is the point. Motion should behave like the systems the site is about when physics adds meaning, and disappear when it would only add noise.
Motion rule: If removing an animation makes the experience worse, keep it. Otherwise, cut it.
This principle is harder to apply than it sounds. The temptation is always to add: another transition, another hover state, another entrance animation. Every addition feels like polish in isolation. In combination, additions accumulate into noise — a site where everything is moving and nothing has emphasis. I cut more animations than I shipped. What's left isn't minimal for minimalism's sake. It's minimal because everything that wasn't necessary was making the necessary things harder to see.
The rotating atom on the homepage has been called decorative by people who looked at it quickly. It isn't.
The nucleus is the three core disciplines — physics, AI, robotics — not as a list but as a center of gravity. Not equal in their relationships but organized around a common question: how does complexity emerge from simplicity? The nucleus is that question. Everything orbits it.
The electrons are the projects. Each occupies a specific orbit for a reason. Particle Life sits close — pure physics, the most direct translation of natural law into visible behavior. Creature Evolution is further out — physics plus computation, evolution's blind optimization process given a digital substrate. Mind Map is further still — computation reaching toward something like understanding, language as the domain rather than space or time.
The orbital trails are deliberate. The destination matters less than the path. Exira-X isn't a set of finished products on display. It is a record of movement — questions asked, experiments run, results that surprised or disappointed, directions that turned out to be more interesting than they looked from a distance. The trails show that something is in motion. A static position would be a lie about what this work is.
The glow pulses. Not on a timer, not triggered by hover. It breathes — a slow, continuous oscillation that doesn't map to any user action. Because the work is alive in the sense that it is ongoing, unfinished, still changing. A static glow would be a claim about completion. The pulse is a claim about process.
I use the term to describe what this site is doing, but it is worth being precise because the term is used loosely.
Sci-art is not science illustrated for a general audience. It is not art with scientific themes — a painting of a black hole, a sculpture shaped like a DNA helix. These are decorative uses of scientific imagery, and they are not what this site is trying to do.
Sci-art, as I use it, is a specific attempt: to make the feeling of scientific discovery accessible. Not the content, not the explanation, not the simplified version. The feeling — the disorientation of encountering a result you didn't expect, the recognition that the universe is organized differently than you assumed, the specific pleasure of a pattern appearing where before there was noise.
This is a much harder target than illustration. Illustration is a translation — take the scientific content and render it visually. Sci-art is a generation — produce in the viewer a felt experience that is structurally similar to the experience of doing science, without requiring any of the prerequisite knowledge.
Every design decision on this site is aimed at that target. The color system doesn't explain physics — it encodes the emotional register of each domain, so that switching domains feels like moving between different kinds of knowing. The motion system doesn't simulate physics — it uses physical dynamics so that the site's behavior is consistent with the behavior of the systems it's about. The typography doesn't reference science — it distinguishes systematically between data and meaning, fact and argument, the machine and the human.
Whether any of this works is genuinely uncertain. Design aimed at emotional experience is always operating with incomplete feedback. You can observe what people click and how long they stay. You cannot observe whether they felt what you were trying to make them feel. The gap between intention and reception is the part of design that doesn't close.
The design will change as the projects change. This is a commitment, not a possibility.
As Particle Life becomes more complex — more particle types, more interaction rules, larger scale — the visual language needs to hold that complexity without losing the sense of what the project is asking. As Ayri develops from a concept into a deployed system, the site needs a way to represent intelligence in interaction that isn't just a chat interface — because a chat interface is a tool, and Ayri is a project, and those two framings require different visual treatments.
The design and the work are not separate things. The design is a project about the same questions as the projects — about how to make invisible systems visible, how to create experience rather than just description, how to build something that communicates through form rather than only through content.
The portfolio is the first project in the portfolio.
That's a principle, not a tagline. It means the design can be wrong and should be corrected. It means new work creates new design problems. It means version one is not a finished thing that launched — it is the opening position of an ongoing inquiry.
This is version one.
More to read
The interface must invite play without hiding causality, expose evidence without becoming a dashboard wall, and work on a phone.
The project began as a visual experiment. It ended by teaching me that spacing, measurement, reproducibility, and interfaces are the same scientific problem.
Most developer portfolios look like each other. I wanted mine to look like a physics textbook.