A writing system designed with geometric precision and phonetic logic. Invented by King Sejong the Great in 1443, Hangul transformed Korean language into an architecture of consonant blocks, vowel currents, and syllable rooms.
Hangul treats script not as decoration but as a thoughtfully engineered system.
Notice how the ㅎ mirrors the throat's shape? Or how ㅏ flows like water?
The seapunk foundation of this site channels the atmosphere of a submerged calligraphy pavilion drifting through a bioluminescent abyss.
한 = Cho (초성) + Jung (중성) + Jong (종성)
초성 — Onset
The leading consonant. In a syllable block, it anchors the top-left, like the primary heading of a knowledge cell. Examples: ㄱ, ㄴ, ㅎ
중성 — Nucleus
The vowel, stretching vertically or horizontally, flowing like water. Examples: ㅏ, ㅑ, ㅡ
종성 — Coda
The final consonant resting at the bottom, closing the block. Not all syllables require a coda.
Imagine a research facility dedicated to Korean typography—now picture it sank to the ocean floor centuries ago, colonized by phosphorescent coral and swirling currents carrying fragments of ancient manuscripts.
Oceanic + Scholarly
This site channels seapunk aesthetics through East Asian scholarly tradition—reverent, luminous, and strangely calming. No ironic internet kitsch, just genuine reverence for deliberate design.
Navy to teal to silver—the palette of the deep sea.
Tidal currents drift behind the content. Bubble particles rise through invisible depths. Hangul characters float like coral formations at 3-5% opacity.
The visual mood is permanent drift—a sense of gentle underwater weightlessness.
Display & Body
A variable sans-serif that mirrors Hangul's deliberate rationality. Weights 300–700 provide visual range within typographic unity. Used at every scale—headings at clamp(2.2rem, 5.5vw, 5rem), body at 16px/1.7.
Code & Annotations
Scholarly monospace for Unicode points (U+314E) and technical labels. A muted steel blue (#7B9CB8) serves as the technical voice, letter-spacing 0.08em.
Illustrative Scale
Giant Hangul characters (ㅎ, ㅏ, ㄹ) serve as section anchors at clamp(4rem, 12vw, 14rem). Rendered with teal wireframe strokes or CSS gradients.
Tone
Headings pose questions. Descriptions use second-person address. The site speaks as a knowledgeable friend obsessed with Korean letterforms, sitting beside you at a tidepool.
300 — Light
400 — Regular
600 — Semibold
700 — Bold
The page structure mirrors Hangul syllable block composition—not uniform, but intentionally varied. A 6×4 grid where cells snap into asymmetric arrangements, each section a complete syllable block occupying 85-100vh.
Grid Spacing
Gap: clamp(6px, 1.2vw, 14px). Cells: border-radius 6px, box-shadow 0 2px 16px rgba(8,22,48,0.35). These visible channels evoke whitespace within Hangul blocks.
Intentional Variation
Section 1: 3×2 cell left, 1×1 cells right. Section 2: inverted. Section 3: full-width panoramic top, four equal cells below. Prevents monotony while maintaining the conceptual throughline.
Navigation
Minimal vertical dot-indicator on the right edge (right: 20px, centered). Each dot = one syllable-block section. Navy 2px border, 8px diameter. Fills with iridescent gradient when active.
Responsive
Below 768px: 6-col grid collapses to 2-col vertical stack. Background Hangul characters scale down. Bubble particles reduce to 8-12. Marble animation pauses on mobile.
Click anywhere. A circular ripple expands from the point of contact, radiating at cubic-bezier(0.25, 0.46, 0.45, 0.94) over 0.8s. This ripple also pulses when cells scroll into view, via IntersectionObserver threshold 0.3.
Radial Wipe Reveal
Cells within each section reveal via radial clip-path expansion from the center: clip-path: circle(0%) → circle(75%) over 1.2s. The entire bento grid reveals as one unified expansion, reinforcing the syllable-block-as-atomic-unit.
Ambient Layer
Marble texture shifts over 40s. Tidal currents animate stroke-dashoffset continuously. Bubble particles drift at 30fps via requestAnimationFrame. A subtle hue-rotate cycles 0°–8° over 60s.
Hangul Parallax
Oversized Hangul characters (ㅎ, ㅏ, ㄹ) respond to scroll position: rotate 2–5°, scale 1.0 → 1.05, creating depth without parallax. Pure CSS transform, throttled scroll listener.
Bubble System
15–25 particles (2–6px) drift upward at 0.2–0.8px/frame. Gentle horizontal oscillation (sinusoidal, amplitude 10–30px, period 3–7s). Colors: #4FD1C5, #38B2AC, #B8C9D9 at 20–40% opacity.