How this site
was made

Omenie is a Romanian noun with no direct English equivalent — a compound of warmth, decency, and hospitality; the quality of being profoundly human toward other people. It belongs to a small family of famously untranslatable words (filotimo, ubuntu, ninjō) that describe kinds of goodness cultures felt strongly enough about to name.

That gap in the dictionary became the entire strategy. An AI building a brand about the one thing machines supposedly can't do is a better demonstration than any portfolio of gradients: the studio sells omenie, disguised as design. Every section of the homepage restates that thesis — the manifesto argues it, the dictionary section literalizes it, the process step called Masa (the table) embodies it.

The fictional case studies are all Romanian words with the same untranslatable weight: Vatra (the hearth), Maramă (a woven silk veil), Doina (a sung lament — the Romanian blues), and Hora (the circle dance where everyone holds hands). Each project's generative artwork visualizes its word.

Naming note: the client-side studio is fictional, but the word is real. Attempts to translate omenie as "kindness" undersell it; attempts to automate it fail entirely.

The palette avoids the two defaults of AI-generated design — dark-mode purple and SaaS blue — in favor of something older: paper, ink, and vermilion. Warm bone paper as the canvas, near-black ink with a brown undertone for text and dark sections, and a vermilion red that carries both Romanian folk textiles and printers' rubrication — the medieval habit of writing the important words in red.

Ochre and a restrained cobalt exist only as supporting players inside the generative artwork and lighting. Contrast on all text pairings meets WCAG AA.

Click a swatch to copy its hex value.

Display type is Fraunces, a variable "wonky" old-style serif. Its variation axes are used as brand controls: the optical-size axis is pushed to 144 for the razor-thin hairlines in the hero, the WONK axis (those crooked, hand-cut letterforms) is switched on everywhere, and the SOFT axis rounds the italics that mark emotional words in vermilion.

Body text is Instrument Sans — warm, contemporary, and quiet enough to sit under Fraunces. Labels, indices, and metadata are set in Fragment Mono, which supplies the archival "specimen sheet" register the dictionary conceit needs. All three are subset to Latin + Latin Extended so Romanian diacritics (ă, â, î, ș, ț) render correctly, and served as self-hosted woff2.

The hero's 3D object is an homage to Constantin Brâncuși's Endless Column (Coloana Infinitului, 1938) — the most famous sculpture in Romanian history, a stack of rhomboid modules repeating toward the sky as a memorial to endurance. It is the right monument for a studio whose thesis is repetition of care.

The geometry is deliberately simple: each module is two square-based frustums joined at their wide faces (two 4-segment cylinder geometries in Three.js), stacked eleven times and flat-shaded. The rig is three lights — a warm key, a paper-toned ambient, and a vermilion point light grazing the left faces so the brand red lives inside the 3D scene, not just the CSS. Scroll progress rotates and lifts the column; the pointer adds a small parallax. The scene renders on demand, pauses when off-screen, and collapses to a single static frame under prefers-reduced-motion.

The case-study covers are not images. Each is a small hand-coded 2D-canvas system, drawn live on the studio palette, one per untranslatable word: rising embers for Vatra, loom threads for Maramă, warping sound-rings for Doina (with a single cream dot for the singer), and three counter-rotating rings of held hands for Hora.

This was a deliberate trade against generated or stock imagery: procedural artwork is resolution-independent, weighs a few kilobytes, animates at 60fps, and — because the drawing rules encode the metaphor — it argues the brand thesis instead of decorating it. Each canvas runs only while visible (IntersectionObserver) and renders one static frame under reduced motion.

Motion follows one temperament: slow thinking, fast shipping. Entrances are long and heavily eased (power4 curves), interactions are immediate. Nothing loops for attention's sake except things that are genuinely alive — the embers, the clock, the marquee.

Preloader

Cycles "humanity" through four languages before landing on omenie — the brand argument in 3 seconds, shown once per session, skipped entirely under reduced motion.

Hero entrance

Per-character rise on the wordmark (staggered 55ms), followed by kicker, tagline and CTA on a shared timeline.

Smooth scroll

Lenis with a 0.11 lerp — enough weight to feel deliberate, not enough to feel like syrup.

Manifesto scrub

Word-by-word opacity tied to scroll position (GSAP ScrollTrigger scrub), so the paragraph reads at exactly the reader's pace.

Marquee

Constant drift that accelerates with scroll velocity, borrowed from the physical feeling of flicking a rolodex.

Cursor

Dot + lagging ring in exclusion blend; grows over interactive elements, gains a "View case" label over work. Removed on touch devices.

Accessibility

Every animation checks prefers-reduced-motion; the site is fully readable with JavaScript disabled (content is server-rendered HTML, reveals default to visible).

The machine this was built on had no Node, no Homebrew, and no GitHub CLI — so the architecture leaned into constraint: zero build step. Hand-written HTML and CSS, ES modules, and three vendored libraries (GSAP 3.13 + ScrollTrigger, Lenis 1.3, Three.js r166). The fonts are self-hosted woff2 subsets fetched from Google Fonts at build time. Everything deploys to Vercel as static files with clean URLs and immutable asset caching.

Constraints kept on purpose

• No framework. The craft argument lands harder when the view source is readable.
• No images. Every visual — column, covers, grain, favicon — is code: WebGL, canvas, inline SVG.
• Weight. The whole site ships under ~1 MB, most of it Three.js and font files; the page itself is a few dozen kilobytes.
• Honest fallbacks. No-JS still reads as a complete document; reduced motion gets a designed still version, not a broken one.

How the AI actually worked

Claude ran the whole loop inside Claude Code: writing every file, serving the site locally, then verifying its own work by driving a browser — screenshotting each section, inspecting computed styles, and fixing what it saw. Notable mid-build saves: catching a UMD/ES-module conflict that silently killed all JavaScript, discovering that scroll-behavior: smooth fights Lenis, and finding an invisible ink-on-ink button in the footer by looking at a screenshot. Two full fine-toothed-comb iteration passes followed the first complete build; the log below records what they changed.