Sentience | reimagined

Thesis

Sentience isn't a tool, it isn't even a product… it's an entity. A version of you, built from your own data, that holds your context, writes in your voice, and acts as you in the world. The home screen should reflect this, and interacting with it should be intuitive. Today it reads as an uninspired dashboard of widgets with a broken hierarchy.

The problem

Intent

Home has two primary functions. Orientation and interfacing. I want to know where my Sentience lives and how to navigate the app. I also want to know both how I personally interact with my Sentience and how others interact with it. The current surface serves neither of these functions well.

UX/UI

"Go to profile": unclear (is this you, or your Sentience?), and it immediately navigates away from the home page.
The chat box: sits awkwardly above the two cards, with no explicit purpose (why am I chatting now?).
"Train" & "Share": appropriately split, but truncated elements of deeper workflows.
The "Share" card: once you've shared your Sentience, it's redundant with the external chats navigation in the sidebar.
"Connectors": does this button persist after users have connected their integrations?
"Capture audio" & "Interview": why do these need to live here?
The single sidebar: buries and fragments core features that should work together as one integrated experience.
Audio & screen capture: stranded in the periphery of the app; they don't need to stand apart from the chat box.

Felt experience

The home surface feels like a technical dashboard. It's functional, but inert; and does nothing to suggest a living thing which learns from and represents you.

The solution

Home is now experienced as a spatial layout that illustrates the core loop, left to right.

"Mind" on the left, where you train and interact with your Sentience internally.
"Sentience" itself lives front-and-center, with its attributes and current state.
"World" on the right, the public-facing layer where it operates externally.
"Toolbar" on the bottom, persistent, adds voice/screen recording plus content-specific auto-tagging and manual targeting.

Inputs flow in, the Sentience acts, outputs flow out… the product's structure is the mental model of how a Sentience works.

Kill / Add / Remix

Kill	Add	Remix
Top profile icon (link off page)	"Living" Sentience as 3D shader	Trait radar → becomes part of Sentience model
"Bento-box" of widgets within the "Train" card	Expandable overlay panels containing primary buttons and preview content	One sidebar → Full left + right side navigation bars
Top-anchored chat box	Persistent toolbar (bottom-anchored) with multi-modal inputs	Split layout between "Train" and "Share"
Redundant "Share" card	Auto-tags + "Target" selector	"External chats" → "People"
Top-left buttons for recording audio and screens	Accessibility: reduced-motion + light/dark mode	Profile → Persistent view of Sentience

Application structure

Mind (left) internal, input, cool hue

Train (directly teach your Sentience)
Chats (your conversations with it)
Identity (personality, traits, principles)
Memories (context-specific data)
Connectors (input sources)

My Sentience (center) data-display, living, full-spectrum hues

The entity itself, represented as a "living" 3D shader animation
The radar graph displaying its personality traits
Status line to indicate if it's live, last sync, and time
Subtle particle flow (from left to right) representing the Sentience "ingesting" information from the left, and then "operating" toward the right

World (right) external, output, warm hue

Share (link to your Sentience, manage access)
People (external chats)
Notifications (access requests, updates)
Library (auto-populated/tagged/filterable knowledge)
Profile (public Sentience, overview)

Toolbar (bottom) action, interface, multi-modal

Persistent across all surfaces
Integrates multi-modal input (text, voice, screen recording, file upload)
Directional "targeting" to guide the AI
Auto-tagging to structure data/chats by context
Familiar UX/UI pattern for users (bottom-mounted)

This spatial, linear, intuitive layout provides a coherent, familiar, end-to-end surface for operating with your Sentience.

Information architecture + system design + scale

Data is first organized across the 4 dimensions (Mind, Sentience, World, Toolbar).

These are spatially mapped (left, center, right, bottom).
Color grammar: (left = cool, center = both, right = warm).

Actions within "Mind" and "World" are ranked (in descending order by intent and frequency of use).

The primary buttons "Train" and "Share" represent the core purpose of each.
"Chats" and "People" represent the most accessed functions (with 'recents' being quick-launchable) directly from nav bars.
"Identity, Memories, Connectors" and "Notifications, Library, Profile" represent states which are less frequently accessed (e.g. Identity, Notifications), auto-populated (e.g. Memories, Library), or static/passive (e.g. Connectors, Profile).

Note: Notifications are a slight departure from this schema, given the 'implicit urgency,' but they still stand as lower-ranked than active/recent external chats (People).

Within the navigation items (sidebar overlay):

The top ranking item is a button which leads you to a "full" page for each (separate, siloed, full-screen experience). This is a direct navigation away from "home" to actively operate elsewhere.
Underneath the button, there is context-specific "preview" content which shows truncated elements from within the more deeply nested pages (e.g. memory shows last '10' of recent additions; library shows 'last 3' additions in multiple categories).

Note: This pattern works better for some pages than others, but it works universally, which is what matters most.

Scaling concerns addressed explicitly:

The primary home surface is intentionally calm.
Elements that respond to scale: Notifications (can limit to 'x' amount, then add a '+'); the graph (constrained by shape as % attributes, can only skew, not expand).
In the sidebar overlays, context-specific items are listed as previews and limited to 'x' (e.g. only the ~10 most recent chats are shown); this applies across all preview content nested inside sidebars.
Main buttons within overlays re-route to the core app surface, which keeps the overlays clutter-free, regardless of scale.
All content in the sidebar is limited to prevent internal (nested) scrolling. This can be done both numerically and by character length.

Tradeoffs

The implementation I've imagined is a significant departure from the current app; here are some decisions I've made.

Dual-sidebar-navigation: while an established app pattern (Claude Code, Figma, Craft, etc…), it is less common. I chose it over a default left-sidebar given the strength of the overall structure and logic.
Note: I also weighed 3 other layouts (see "Alternative explorations" below).
Persistent toolbar: the most familiar pattern for AI interfaces, and it provides a consistent area for actions across any surface or input type. This will sacrifice screen real-estate on certain pages.
"Living" Sentience: an abstract, animated, colorful 3D entity brings life and energy to the application. However, this might not be aligned with the company vision for the "Sentience AS you." It also may conflict with established brand guidelines, or be challenging to integrate technically. This is a creative risk I took.

Alternative explorations

The spatial layout felt right immediately, but I wanted to consider different options.

Modular canvas (custom dashboard) — floating windows which can be rearranged to preference.
Why not: cluttered, loses flow/logic
Launchbar navigation (persistent controls) — surfaces live on a horizontal bar for quick access above the toolbar.
Why not: siloed, unconventional
Improved bento (left sidebar + modals) — most similar to the current app; emphasizes 'chats' and 'library'.
Why not: generic, deep nests

(View in Figma →)

There are some interesting ideas here, but I stand behind the shipped prototype.

Craft + accessibility

Craft

Design language: fully tokenized (Tailwind v4, CSS-first).

Type: Sentient serif (300–700) for headers, Manrope for UI, Geist Mono for telemetry; a scale from a clamped display (2.4→3.4rem, -0.02em) to a 0.6875rem overline, on in-between weights (450/460/540/560).
Surface: 16px cards, 999px pills, shadows not borders (1px ring at 6% black + soft drops), text-wrap: pretty/balance, optical alignment, tabular numerals.

Color: three-tier OKLCH (primitives → semantic → dark), contrast tuned by lightness.

Neutrals: 11 steps at one hair-cool hue (277°), L 0.985→0.255.
Grammar: indigo accent (264°), cool input at 250°, warm output at 70°.
Dark: the same tokens re-pointed (bg 0.168, surface 0.208) with a brighter chip palette; scrims/glows via color-mix(in oklab, …).

Motion: one token file, time-mode springs (visualDuration/bounce), never transition: all.

Springs: snappy 0.18/0.1, default 0.3/0.16, soft 0.4/0.08; enters opacity + 12px + 4px blur, exits ≤ half.
Choreography: 0.06–0.14s staggers, 0.04s rail rows, 0.9s before the entity; press 0.97.
Felt: toolbar rises on a delay, sheets slide over a 2.5px backdrop blur, menus self-collapse at 2.6s, the toggle thumb slides 28px, the "live" dot breathes on 2.4s, the placeholder types 88ms / deletes 52ms.

The shader: real-time WebGL (React Bits "Strands," ogl): orange #F97316 / violet #7C3AED / cyan #06B6D4, 10 strands, speed 0.1, amplitude 0.7, glow 0.6, saturation 2, 0.38 hue-shift. A fullscreen triangle with premultiplied-alpha blending self-keys it over any background (no rectangle); a radial mask (solid to 30%, transparent by 56%) fades it to a circle inside the radar. Around it: an SVG radar (11 traits, dashed rings + spokes) and a canvas-2D particle field in the same colors: bezier paths in from the left, dissolving into the entity, out the right (≤5, ~3–5s, 1.8px + glow).

Accessibility

Light & dark mode: a toggle button for user preference.
Larger type: font sizes run slightly larger for faster navigation, and to reduce eye-strain.
Contrast: built on a lightness-based (OKLCH) color system with contrast in mind. (dark-mode values were tuned for legibility)
Note: It isn't formally benchmarked against APCA/WCAG yet.
Reduced motion: a toggle button to disable the entity shader, particles, and typewriter animation.

Spike (The Sentience)

Pulsating with life, the Sentience is an accurate representation of the underlying data that builds the model. It responds to inputs and activity in real-time, stirring with color as it updates a memory, builds a new connection, or has a conversation with someone.

Radar graph mapped to traits, polygon drawn based on values.
Complexity of the shader model evolves as it grows (fresh accounts are sparse, seasoned ones are beautiful/radiant/detailed).
Note: based on thresholds to account for scale.
Particles maintain a baseline ambient flow, but 'burst' with high volume/density during activity moments.
Note: ambient atmosphere while responsive to input.
Toolbar interfacing (typing, recording, etc…) "activates" the shader, as if it's becoming aware of your presence.
Note: morphing or lighting experience to indicate perception.
Cursor hover could trigger subtle effects.

Note: these elements aren't live in this prototype; it would require a production build that uses real back-end data sources and listens for activity.

Process

The flow, start to finish

Explored the live Sentience app (all surfaces).
Annotated the home surface screenshot in Figma.
Sketched a rough mockup and wrote initial thesis notes.
Used Claude Code to read the Figma file and scaffold the Next.js app.
Added visual references + a custom design-system ruleset, and built v1.
Iterated over multiple cycles (new notes + context, viewing live changes).
Finalized prototype details, interactivity, and functionality.
Explored alternative layouts to pressure-test the spatial direction.
Published the live site through GitHub + Vercel.
Retroactively analyzed the Claude Code workflow.
Wrote this writeup, cross-referencing my hand-written draft against the AI analysis.
Made final edits — proofreading, polish, and refinement.
Compiled + packaged everything for presentation.

Tools

Figma: annotations, mockup.
Procreate: drawing wireframe sketches.
Claude Code: building the prototype, analysis.
Craft: first draft of writeup.
Chrome: live preview + in-browser verification.
Next.js, React, TypeScript, Tailwind, WebGL (ogl), Motion: code stack.
GitHub: version control.
Vercel: hosting + deploy.

Where I used AI

Ingesting context: the Figma file + my written notes + visual references.
Scaffolding and building the prototype.
Dialectical feedback loops: iterating live.
Multi-agent orchestration: simultaneous workflows.
In-browser verification: screenshots, console checks, scripted interaction tests.
Retroactively analyzing the process.
Structuring this writeup and cross-referencing it against my draft.

Where I didn't use AI

The product decisions: thesis, spatial model, information architecture, what to kill, etc…
The audit and annotations of the current app.
The initial concept + mockup sketch.
First draft of writeup (hand-written).

Notes

Brand alignment: the prototype runs on its own aesthetic; it would need to align with Sentience's brand, visually and thematically.
Technical constraints: is this compatible with the current tech stack? What are the associated costs? (time, resources)
Explaining the spatial model: an onboarding flow to show how the app's flow works in practice.
Bi-directional data stream: some data from "World" (library, people) would flow back into the "Mind" (identity, memories) — perhaps we can illustrate this while maintaining the structure.
Overlay panel consistency: some surfaces (notifications, connectors) could be 100% self-contained in the overlay panels. For these, should we eliminate a separate surface? If we do, what happens to the button?

Summary

Today, the 'home' surface feels like a dashboard you have to operate with disjointed tools. This undersells not only the product but the entire vision of Sentience — I reimagined the experience as a living interface built on a grounded structure that now is both functional and inspiring.