A Big Five mapper for family dynamics

Constellation

Thirteen people, five lenses, one canvas of force-pulled stars. Less a personality quiz, more an instrument for spotting family fault-lines and bridge-builders.

13Profiles mapped
5Lenses per person
4MBTI families
1Family system

The frame

Three surfaces, one instrument

The constellation. The dossier. The pair. Each surface answers a different question about a person, a pair, or a system.

/ — home

The constellation

A PixiJS canvas where every person is a star pulled by d3-force. Family-color halos, weighted edges, click to enter a profile.

/people/[slug]

The dossier

One person, five lenses. Big Five aspects, the 16-type map, DISC wheel, tesseract, plus a written dossier. Scroll-spy nav tracks the lens you're reading.

71%
/pair/[a-b]

The pair

Two people, one diff. Trait-by-trait deltas with a Claude-generated reading on top — where they bridge, where they grind. The same engine extends to groups of 3+.

How it works

From a four-letter type to a starlit map

Four stages — calibration, drawing, reading, and reconciling. Each one earns the next.

Stage 01

Calibrate

Type in "ENTP-A" or "INFJ" and the system seeds a Big Five baseline. Want sharper? Open the calibrator and answer ten aspect-level questions to convert MBTI into proper Big Five aspects.

calibrate · seed from type

Step 1 of 2 · choose a type

MBTI
ENTP-A
Analysts · Debater
DISC
— optional
Adds a third triangulation
Baseline seeded. Sharpness 62%. Open the calibrator to climb past 85%.
Stage 02

Draw the canvas

Every person becomes a star. PixiJS renders the field; d3-force pulls similar profiles together and pushes opposites apart. Halos carry family color. Edges are weighted by aspect-distance — bridges glow, fault-lines feather thin.

constellation · 13 stars, force-resolved
MIKE ENTP-A · ANALYST
d3-force simulation · 13 nodes · halo-tinted by family
Analysts Diplomats Sentinels Explorers weighted by aspect-distance
Stage 03

Read the lenses

Click a star. The dossier opens with up to five lenses: Big Five aspects, the 16-type map, the DISC wheel, the Tesseract, and a long-form written dossier. Scroll-spy nav tracks where you are; each lens explains the others.

M

Mike Perina

ENTP-A · Debater · Analyst
Analyst Sharpness 87%
Big Five 16 DISC Tesseract Dossier
Openness Intellect · Aesthetics
88
Conscientiousness Industry · Order
54
Extraversion Enthusiasm · Assertiveness
79
Agreeableness Compassion · Politeness
42
Neuroticism Volatility · Withdrawal
24
The high-Openness, low-Politeness blend reads as "won't stop pulling threads" — useful in scout work, costly at the dinner table.
Stage 04

Reconcile

Pick any two stars. A pair page diffs their aspects, then Claude reads the diff and writes one paragraph on where they bridge and where they grind. Same engine extends to groups of three, four, the whole table.

M
Mike ENTP-A · Analyst
K
Keaton ISFJ · Sentinel
Affinity · 47%
Where they bridge
Both run low Neuroticism — steady-state under pressure, neither catastrophizes.
Shared Industry aspect — finish what they start, even if for opposite reasons.
Where they grind
Openness Δ +44 — Mike pulls threads; Keaton wants the thread back where it was.
Politeness Δ +38 in Keaton's favor — bluntness reads as disrespect.
One-paragraph reading generated by Claude · cached in Supabase · regenerated on aspect change

A note on groups

Three or more is its own surface

The pair generalizes. Pick a table, a road-trip car, a project team — the system infers a group profile and names the role each person tends to play.

/group · perina-thanksgiving

Mike · Westen · Ella · Gryffin · Brycen · Keaton

Bridge-builders: Ella, Brycen. Fault-line: Mike ↔ Keaton on Openness. Group temperature: high Enthusiasm, mid Order, low collective Neuroticism — loud, generally cheerful, vulnerable to over-commit. Seat the bridges between the fault-line and dinner stays warm.

What surrounds it

The stack underneath

A small, deliberate set of pieces. Each one earns its slot.

PixiJS + d3-force

Canvas-rendered stars with pre-baked halo textures. d3-force pulls similar profiles together. Holds 60fps on mid-range mobile.

Supabase

People, aspects, pair-cache, edges. Single source of truth — the canvas reads, the dossier reads, the pair page reads.

Claude

Generates pair-readings and group inferences from the diff. Cached on first compute; regenerated when an aspect moves.

Next.js 15

App Router, React 19. The canvas is a client component; everything else is server-rendered for a fast first paint.

Glossary

Five terms to keep close

Plain-language definitions. Skim this once and the rest of the site reads cleanly.

Big Five
The five trait dimensions psychologists actually use — Openness, Conscientiousness, Extraversion, Agreeableness, Neuroticism.
Aspect
Each Big Five trait splits into two aspects (e.g. Openness = Intellect + Aesthetics). Ten total. Where the resolution lives.
Family
The four MBTI clusters: Analysts, Diplomats, Sentinels, Explorers. Used as the canvas color anchor.
Sharpness
How much of a person's profile the system actually has. 0–100%. Higher with more aspect data or DISC triangulation.
Bridge / fault-line
A bridge is a shared aspect that lets two people meet. A fault-line is the gap that needs translation — or seating.
Reconciliation
The one-line reading the system writes about a person — the surprising blend, the load-bearing tension.

Open the instrument

Explore the constellation.

Thirteen stars. Five lenses each. Pick anyone — start with whoever you understand least.

Live: constellation.tangent.build Stack: Next.js · PixiJS · Supabase · Claude Part of: tangent.build