ENSIL 비쥬얼 설계 및 인터랙티브 웹 프로토타입

A single discarded electronic component undergoing subtle fermentation and decomposition, photographed as a minimalist specimen on a clean white background. Clearly recognizable at its core, but its outer form slowly breaks down into an organic state. Edges become soft, blurred, and diffused, with material dissolving into fine particles, fibers, and hazy organic residue - as if captured in a microscopic time lapse. Some areas remain sharp while others dissolve into translucent noise. Subtle organic distortion: swollen surfaces, softened edges, warped contours, tiny branching fibers, particulate residue, faint translucent trails. Decomposition feels slow and biological, not violent. Fine fragments drift away while others grow outward and reconnect. Original geometry preserved - not abstracted. Muted monochromatic palette: pale gray, dirty ivory, translucent white, soft charcoal, desaturated green, dull metallic tones. Soft diffused studio lighting, high key background, shallow depth of field, analog macro photography. Quiet and uncanny mood. No glitch, cyberpunk, neon, melting plastic, dripping liquid, slime, fire, or dramatic destruction.


A single discarded electronic component undergoing subtle fermentation and decomposition, photographed as a minimalist specimen on a clean white background. Clearly recognizable at its core, but its outer form slowly breaks down into an organic state. Edges become soft, blurred, and diffused, with material dissolving into fine particles, fibers, and hazy organic residue - as if captured in a microscopic time lapse. Some areas remain sharp while others dissolve into translucent noise like fragments. Subtle organic distortion: swollen surfaces, softened edges, warped contours, tiny branching fibers, particulate residue, faint translucent trails. Decomposition feels slow and biological, not violent. Boundary between solid material and air becomes ambiguous. Original geometry preserved - not abstracted. Muted monochromatic palette: pale gray, dirty ivory, translucent white, soft charcoal, desaturated green, dull metallic tones. Soft diffused studio lighting, high key background, shallow depth of field, analog macro photography. Quiet, uncanny mood. No glitch, cyberpunk, neon, melting plastic, slime, fire, or dramatic destruction.


Center: a clearly recognizable green PCB circuit board fragment - visible copper traces, solder points, mounted components. Outer form: a single translucent, cohesive, smoothly rounded mass, as if wrapped in a thin dissolving membrane - clean unified silhouette, no fragmented or ragged edges. A few loose wire/electrode like filaments loosely drape and coil around the translucent mass - casual, mid drift, not tightly bound. PCB core stays sharp and legible; translucent shell softly diffuses light, faintly hazy, reads as one complete form. Subtle organic distortion: gently swollen surface, softened contour, minimal warping - restrained. Decomposition feels slow, biological, quiet. Muted palette: pale gray, dirty ivory, translucent white, soft charcoal, dull metallic tones, desaturated PCB green. Solid bright white studio background, no gradient, no vignette. Soft diffused studio lighting, shallow depth of field, subtle atmospheric haze, analog macro photography. Quiet, uncanny mood. No glitch, neon, cyberpunk, melting plastic, dripping liquid, slime, fire, destruction, scattered debris, or chaotic edges.

Fermented PCB chips and electronic components transformed by slow organic fermentation into biomorphic forms, arranged individually on a pure white studio background. Each chip is soft, swollen, slightly melted, and organically distorted, with softened edges and irregular translucent membranes over original electronic structures. Semi transparent amber, smoky brown, muted olive green, and pale gray materials; thin gelatinous surfaces, translucent organic films, subtle internal moisture, faint bubbles. Dark circuit traces and components remain partially visible inside as soft abstract silhouettes. Flat lay, shot directly from above, each specimen isolated with generous negative space, varied organic shapes - rectangular, rounded, irregularly inflated. Strong backlighting creates glowing edges, soft internal shadows, visible transmitted light. High key white background, delicate shadows, subtle grain, slightly hazy focus, minimal clinical specimen photography aesthetic. Organic decay fused with electronic waste, quiet uncanny atmosphere, photorealistic material rendering. No text, labels, or containers.

same electronic specimen, same exact object identity, preserve the original silhouette, preserve the original topology, preserve the original component layout, preserve all major shapes, preserve PCB geometry, preserve wire positions, preserve electronic part placement, preserve overall proportions
only a very subtle natural inflation of the existing translucent and organic material, minimal soft swelling around already existing membrane areas, slight increase in surface fullness, very gentle outward pressure, tiny rounding of already soft edges, extremely restrained volumetric change
the rigid electronic structure must stay fixed and unchanged
PCB planes remain flat
chips remain in the same position
connectors remain in the same position
wires remain in the same path and shape
no folding
no bending
no twisting
no shifting
no rearrangement
no structural morphing
no silhouette replacement
no shape transformation
the only visible change should be a slight increase in thickness and softness of the existing translucent bio-material, like slow fermentation pressure building inside the same form
keep the overall object size almost constant
maximum inflation should be very small
the object should not become rounder as a whole
do not create new bulges
do not create new organic volumes
do not expand beyond the existing spatial envelope
the transformation should feel like subtle biological pressure inside a fixed electronic specimen
tiny surface changes only:
slightly fuller translucent membrane
slightly softer existing edges
very subtle condensation
slightly denser cloudy residue
minute internal pressure
microscopic material settling
scientific specimen photography, grounded sci-fi, high-key white background, soft diffused studio lighting, desaturated green, pale cyan-gray, dirty ivory, dark PCB green, restrained organic texture, quiet clinical atmosphere
the final image must still read as the exact same object with the exact same structure, only slightly more pressurized and fermented

Before modifying code:

Inspect git status and preserve all existing user changes.

Inspect the current framework, routes, state, 3D renderer and asset paths.

Confirm every creature GLB loads from its actual current path.

Inspect the existing FIELD, Habitat, Archive, Creature Record and Landing pages.

Identify which controls are shared between FIELD and individual habitats.

Check current desktop and mobile behavior.

Do not reset, delete or overwrite unrelated work.

Do not deploy or push unless separately requested.

The current project is expected to use React, TypeScript, Vite and raw Three.js. Important existing entry points likely include:

src/App.tsx

src/routes/Landing.tsx

src/routes/Field.tsx

src/routes/Habitat.tsx

src/routes/Archive.tsx

src/routes/CreatureRecord.tsx

src/components/field/EcosystemCanvas.tsx

src/components/habitat-engine/HabitatWorld.ts

src/components/habitat-engine/CommonFieldLandscape.ts

src/components/habitat-engine/systems.ts

src/components/habitat-engine/biomes.ts

src/components/branding/LiquidEnsilLogo.tsx

src/data/creatureRecords.ts

Verify these instead of assuming they are unchanged.

Preserve the existing routes:

#/

#/field

#/habitat/:id

#/archive

#/creature/:id

02. Overall design direction

Redesign ENSIL as a precise editorial interface surrounding a living spatial system.

The website should feel like:

a graphic-design studio publication

a biological research interface

an experimental moving-image identity

a navigable electronic ecosystem

It must not feel like:

a game menu

a generic sci-fi dashboard

a cyberpunk interface

a portfolio template

a collection of bordered cards

an oversized typography experiment with no information hierarchy

a decorative Three.js demo

Preserve the current ENSIL palette:

Primary: #73D2BE

Secondary: #5FA48D

Structure: #545756

Dark: #171818

White: #FFFFFF

White must remain the dominant field.

Approximate usage:

65–75% white and near-white

15–20% #171818 and #545756

5–10% #5FA48D

3–7% #73D2BE

Do not fill entire pages with the primary or secondary color. Use color as signal, selection, depth and activity.

03. Typography and layout based on Clubbed Form

Use the spatial logic of Clubbed Form’s About page:

fixed, narrow navigation

generous horizontal margins

compact editorial text blocks

strong negative space

two-column or asymmetrical text composition

graphic layers that can sit behind and between text

images and 3D elements treated as part of the page composition

minimal distinction between interface and editorial layout

Keep ENSIL typography in:

Helvetica, "Helvetica Neue", Arial, sans-serif

Do not add an unlicensed Neue Haas font.

Typography system:

Micro label: 10–11px, uppercase, letter-spacing 0.06–0.1em

Navigation: 14–16px, regular

Body: 14–16px, line-height 1.15–1.35

Section heading: 18–28px

Display typography: use only where it has a compositional purpose

Avoid ultra-large text that gets clipped or overwhelms the content

Avoid unnecessary bold weights

Prefer regular weight with scale, spacing and alignment producing hierarchy

Global navigation:

Keep INDEX / FIELD / ARCHIVE.

Reduce visual weight.

Use a transparent or white surface with a thin structural divider.

Keep the ENSIL symbol readable but small.

Active-route indication should be a precise line, displacement or contrast change.

Navigation must remain accessible while FIELD is unlocked.

In pointer-lock FIELD mode, reduce navigation opacity; restore it when the pointer is released.

Background graphics should not be generic grids. Use incomplete maps, contours, partial line fragments and sparse coordinate traces. They must support content rather than uniformly cover the page.

04. Landing page redesign

Preserve the interactive ENSIL logo, but integrate it into a Clubbed Form–inspired editorial composition.

The page should contain:

compact fixed navigation

ENSIL logo as the main visual identity

concise project statement

four-creature status or index

clear entrances to FIELD and ARCHIVE

one large but controlled background graphic layer

no generic full-page grid

Use the first attached motion reference for the landing interaction.

Observed motion qualities to reproduce:

translucent square modules arranged as a shifting field

white or near-white rounded forms moving through the modules

coordinated horizontal recomposition

slight blur at the moving boundary

controlled depth created with opacity and scale

muted cream, green and mineral color transitions

isolated micro-copy and small registration marks

The ENSIL logo must not behave like a blurred layer floating over a static logo. The logo shape itself must deform or be selectively revealed by the motion field.

Do not:

inflate the black logo

randomly move individual letters

distort the logo beyond recognition

apply a uniform Gaussian blur

make the effect look like a blob passing over the logo

use exaggerated bounce or gummy motion

The resting state must preserve the exact ENSIL silhouette.

05. Completely rebuild FIELD as a first-person spatial experience

The current FIELD uses an elevated OrbitControls-based third-person view. Replace FIELD mode with an immersive first-person system.

Do not remove OrbitControls from individual specimen Habitat pages unless technically necessary. FIELD and individual Habitat controls can be different.

First-person controller

Create a dedicated controller, for example:

FirstPersonFieldController

FieldInteractionSystem

FieldProximitySystem

FieldReticle

FieldEntryOverlay

Desktop behavior:

Click or press ENTER FIELD to begin.

Request pointer lock only after explicit user input.

Mouse movement controls view direction.

WASD and arrow keys move.

Shift can provide a slightly faster walk but must not feel like sprinting.

Esc releases pointer lock and restores navigation.

E or click interacts with the focused creature or habitat node.

Movement must use acceleration and damping rath