# Super Brain — ThreeUI Motion Studies

Three locally runnable visual prototypes. Copy and layouts are concept work, not claims about delivered products.

## Reused ThreeUI Community effects
Source: https://github.com/MengTo/threeui (retrieved 2026-09-20)
MIT: ThreeUI-LICENSE.txt
- Presence: src/shaders/orbital-sphere/{OrbitalSphereBackground.tsx,orbitalSphereRenderer.ts}
- Matter: src/shaders/liquid-form/{LiquidFormBackground.tsx,liquidFormShaders.ts}
- Resonance: src/shaders/energy-orb/{EnergyOrb.tsx,energyOrbShaders.ts}
Original copyright: Meng To. License notice retained in source/LICENSE.
Components are integrated into original layouts. Liquid Form and Energy Orb clocks are adapted for continuous speed control and pause. No Cortexa or Pro source is included.

## Human head
head-default.glb: https://github.com/ptakaya/claude-face
CC0 model, as declared in ATTRIBUTION.md (copied alongside this file).
Particle renderer is custom. The head is not a ThreeUI asset.

## Runtime
React: MIT. Three.js r128: MIT. Bundled by Vite; no remote runtime requests.

## Run
npm install
npm run dev
Open http://127.0.0.1:5186/?view=presence (or matter / halo)
Build: npm run build

## Second collection
- Velocity: ThreeUI Community WarpFieldBackground + warpFieldRenderer, hyperspace variant.
- Fluidity: ThreeUI Community RibbonFieldBackground + ribbonFieldShaders; clock adapted to retain the paused frame.
- Beyond: vertex and fragment shaders extracted from ThreeUI Community `src/shaders/neuform-isolated/sources/portal-field.html`; original saved in source/src/shaders/portal-field/portal-field.original.html. React renderer, aspect-correct centering, warm colors and speed control are local adaptations.
All three reuse MIT-licensed Community source from the same repository. No remote scripts, fonts or paid source are needed.

## Third collection
- Horizon: ThreeUI Community EmeraldHorizonBackground / emeraldHorizonShaders (MIT); continuous clock and horizon layout adapted locally.
- Cymatics: ThreeUI Community BellFieldBackground / bellFieldShaders (MIT); continuous clock and pause-aware strike impulse adapted locally. Clicking the visual triggers its impulse.
- Form: original Three.js geometric sculpture in Lattice.tsx, not a ThreeUI catalog template. Uses a lit torus knot, wireframe and orbital line, with local pointer response.

## ThreeUI-only compositions
- Genesis: Emerald Horizon ground + Orbital Sphere subject + adapted Portal Field halo.
- Alloy: Ribbon Field backdrop + Liquid Form subject; CSS radial mask blends the opaque metal shader into the backdrop.
- Ignition: Warp Field streaks + Energy Orb subject; CSS screen blend and mask preserve the depth layer.
These three compositions use only ThreeUI Community effects (MIT), not the custom human or lattice scenes. Layer switches unmount individual effects; shared speed and pause control drive every active layer.

Presence motion refinement: now combines Ribbon Field and Orbital Sphere behind the independently rendered CC0 portrait. Added visibility-change resume handling to these two vendored components; portrait grid light band and page-wide ambient particles are local implementations.

## Alternate style compositions
- Lucent / frost: DataPixelArcCanvas (light mode) + CondensationBackground.
- Signal: DataPixelArcCanvas (dark mode) + DotMatrixBackground.
- Confluence: StreamConvergenceBackground + BellFieldBackground.
All effects are ThreeUI Community MIT source, downloaded from MengTo/threeui. Compositions, masks, colors and typography are local design changes. Dot Matrix and Stream Convergence receive continuous clocks for pause; all four new component wrappers receive visibility-resume handlers.

## 2026-09-21 combinations
- Tidal: ThreeUI Structure Flow + Stream Convergence, layered as a particle horizon with cool light streams.
- Cipher: ThreeUI Warp Field (letters variant) + Dot Matrix, with warm red grading.
- Velum: ThreeUI Bell Field + Orbital Sphere; inverse grayscale/multiply blending produces a light paper-like composition.
All effects are MIT ThreeUI Community source. Structure Flow receives a tab-visibility resume handler. Existing Presence remains unchanged.

## Archived original renderer experiment (2026-09-21)
The archived experiment embeds public/claude-face/index.html + main.js, vendored from https://github.com/ptakaya/claude-face/tree/main/phase1. The unmodified upstream main.js is retained at source/claude-face/main.original.js. This experiment temporarily replaced Portrait.tsx; it has since been reverted in the active Presence view.

Preserved upstream: area-weighted sampling, 800,000 face particles on desktop, additive sprite material, per-point shading and occlusion, native blink/morph processing, OrbitControls and original ambient motes. Mobile uses the same renderer with 250,000 face particles. The camera uses the original yaw parameter (-8 degrees).

Integration changes: hide standalone app chrome, localize Three.js 0.184 dependencies and CC0 head, embed as a same-origin iframe, add origin/source-checked host messages for pause/speed and a four-second local smile, pause when document is hidden, apply outer CSS composition/mask. ThreeUI Ribbon Field and Orbital Sphere remain subdued background layers; page-wide ambient particles are local.

Code and supplied head: upstream CC0 (public/LICENSE and ATTRIBUTION.md). Three.js: MIT (claude-face/vendor/three/LICENSE). ThreeUI: MIT (ThreeUI-LICENSE.txt). No Claude bridge, microphone, TTS or real conversation service is connected. All runtime assets used by this integration are served locally.

## Current Presence — restored previous version
At user request, Presence again mounts Portrait.tsx: local mesh/wireframe and particle composition using the CC0 head, adapted blink/morph algorithms, local greeting interaction, ThreeUI Ribbon Field and Orbital Sphere, and page-wide ambient particles. The full original renderer files remain archived but are not mounted.

## Presence memory sections (2026-09-21)
Forest atmosphere image: https://images.unsplash.com/photo-1441974231531-c6227db76b6e (Unsplash), locally cached as images/memory-forest.jpg. It is an illustrative landscape, not a user memory. All memory stories, quotations and waveform graphics are fictional design examples. No audio recording, upload or persistence is implemented. Original Presence portrait is retained with a slightly brighter rim light; new sections and interactions are local React/CSS.

## Presence ThreeUI combination upgrade
Vendored from MengTo/threeui Community: Flow Field (simplex trails and pointer repulsion), Particle Wordmark (seeded dot assembly), Gallery (curved Three.js picture rail with original sample assets), Audio Wordmark (two animated circular bar fields), Liquid Metal Button (original shader and activation bridge). All five are the upstream effects, not CSS lookalikes.
Local adaptations: PRESENCE wordmark and MEMORY audio label; host-controlled animation clock with pause, speed and visibility handling for isolated HTML; flow delta scaling; portrait-stage audio crop/scale; Chinese button sizing; page masks and muted green grading. Gallery's existing speed/visibility handling is retained. Remote tracking scripts and font links were removed from the mounted sources. Voice animation is illustrative and has no microphone or recorded audio. MIT notice retained in ThreeUI-LICENSE.txt; gallery imagery remains illustrative and is labeled accordingly.

## Super Brain brand/content alignment
Reference: https://2w5.cn/ and local website/deploy-2w5, checked 2026-09-21. Product, audience, trust, founder and contact sections adapted for this local preview. Official slogan and latest logo follow company/public-messaging.md. No live website deployment performed. No sample completeness scores, service counts or unverified security implementations copied. Existing website warm-family / institution imagery is used as labeled scenario illustration, not actual customer evidence. Founder image is founder-provided website material. Green/ivory/champagne grading is proposed art direction, not a formal brand-color specification.

Particle wordmark updated to SUPER BRAIN with reduced footprint and opacity as a quiet brand signature.

SUPER BRAIN signature: local 12-second gather/hold/disperse choreography replaces the upstream per-dot flicker; upstream seeded mask sampling and canvas lifecycle retained. Denser dots preserve readable letters; a single muted champagne highlight crosses during the hold. Reduced-motion renders a settled wordmark.

## Life notes and growing tree
ThreeUI Community Sketchbook: original nested-strip paper-curl, drag, keyboard, zoom and loupe logic from src/shaders/sketchbook/sketchbookDocument.js. Local adaptation hides standalone portfolio chrome, replaces nine Singapore plates with four locally generated SVG text spreads (fictional Chinese memory examples), removes unused art/font references and intro riffle, and connects host motion control. Standalone local document: /life-book/index.html.
Generative Tree: src/shaders/elements/GenerativeTree.tsx and sources/generative-tree.html from MengTo/threeui. Original growth, pointer wind and click shake retained; subdued gold palette and host pause/speed integrated. MIT terms retained in ThreeUI-LICENSE.txt. Neither section represents stored customer data or a live digital-life service.

## Old-site content migration (2026-09-21)

Content source: https://www.superbrainw.com/ (old website), products/scenarios/about/contact pages. Adapted into product capabilities, five memory-material selectors, four consultation directions and three direct media-source links. Cross-checked against `products/yonghengdewo-digital-immortality.md`, `sources/B001-S015-cctv-interview-verification.md`, and `sources/B013-S001-litchi-news-youth-entrepreneurship-profile.md` in the company knowledge base. Media card headlines may be editorial summaries; attribution distinguishes original source from repost host.

Not migrated as current claims: hardware configuration, market/customer/patent counts, literal consciousness cloning, old pricing and domain-specific filing. Service availability and deliverables remain subject to project assessment. Existing portrait, particle, book and tree effects retained.

## EverMe product site (2026-09-29)

/everme.html is a separate product-facing adaptation of 人生影像3.0-永恒的我-品牌发布版V2.pptx (16 slides). Content framework: photos, video, interactive AI digital counterpart; it is a brand framing, not an industry standard. Visual direction continues the locally developed Presence design. Existing CC0 portrait model and adapted blink/smile rendering retained, alongside project-owned ambient particles. Existing AI scene illustrations are reused with explicit illustrative labels; no slides are represented as actual product UI or customer case evidence. Core HTML is statically rendered from the same React component used for client hydration.

### EverMe 人生影像 3.0 空间背景

`/brand/era-space.webp`：2026-09-29 为本产品官网生成的 AI 概念空间背景，参考用户品牌发布版 V2 PPT 的通透建筑、湖面与玻璃视觉；非实景摄影。流光与粒子由本地 `EraAtmosphere.tsx` 绘制。