One file. Design engine + motion layer. Build differently.

The Problem

Every vibecoded site looks the same. Not because AI is bad at code — because AI has no taste.

Ask any AI to build a landing page and you get this, every time:

Purple gradient hero → Inter font → centered H1 → two equal CTAs
Three icon cards → testimonials → pricing table → footer

It's not wrong. It's just invisible. And invisible is worse than wrong.

The vibecoder pain points:

| What you get | What you wanted | |---|---| | Inter + violet gradient | A typeface with a point of view | | scale(1.05) on hover | Motion that means something | | Three equal-weight columns | Hierarchy that guides the eye | | Screenshot placed on background | Product living inside the scene | | One layout, every project | A perspective that's yours |

The top 1% of sites share one trait: a single signature element the rest don't have. A typeface pushed to 18vw. A product card that floats. A section that wipes in with clip-path. A background that reacts to the cursor.

None of that is hard to build. It's just never in the prompt.

Formia encodes those decisions. 11 design systems, each with its own typeface, palette, and motion signature. Drop one in and your site immediately reads like someone made a choice — because someone did.

formia.css — Layout primitives, design tokens, fluid type scale, motion utilities.
formia.js — Everything else: scroll reveals, parallax, magnetic, cursor, counters, split text, 11 themes, accent system, dark/light mode, viewport preview, GSAP choreography, Three.js hero scene, PWA manager.

No build step. Zero config.

Install

npm install formia

Or drop files directly into your project:

<link rel="stylesheet" href="formia.css">

<!-- Motion only (no GSAP/Three.js needed) -->
<script src="formia.js" defer></script>

<!-- Full engine (themes, Three.js, GSAP) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="formia.js" defer></script>

formia.css — Design Tokens

Override the tokens in your project:

:root {
  --bg:     #0d0c0b;
  --fg:     #f0ede8;
  --accent: #d4a04a;
}

Layout Primitives

<!-- Stack — vertical rhythm -->
<div class="stack" data-gap="6">
  <h2>Title</h2>
  <p>Body</p>
</div>

<!-- Grid — responsive columns -->
<div class="grid" data-cols="3">
  <div class="card">...</div>
</div>

<!-- Cover — full viewport, centered -->
<section class="cover">
  <h1 class="h1">Hero</h1>
</section>

Motion Attributes (data-*)

All features are driven by HTML data- attributes.

| Attribute | Effect | |-----------|--------| | data-reveal | Fade + translateY on scroll | | data-reveal="left" | Slide from left | | data-reveal="right" | Slide from right | | data-reveal="scale" | Scale up from 95% | | data-reveal="clip" | Clip-path wipe | | data-stagger | Stagger children on reveal | | data-parallax="0.3" | Parallax scroll (0–1 speed) | | data-magnetic | Element follows cursor | | data-cursor | Enable custom cursor | | data-counter | Animate number from 0 to data-value | | data-split-text | Split words/chars for animation |

<h1 data-reveal="clip">Build differently.</h1>
<div data-stagger>
  <p>Animates</p>
  <p>With</p>
  <p>Stagger</p>
</div>
<div data-parallax="0.4">Background layer</div>
<button data-magnetic>Magnetic CTA</button>

formia.js — Design Engine

Handles themes, accents, color mode, viewport preview, GSAP animations, Three.js scene, and PWA.

JavaScript API

// Apply a theme
FORMIA.applyTheme('cobalt');

// Change accent color
FORMIA.setAccent('#ff00ff');

// Toggle color mode
FORMIA.setColorMode('dark'); // 'light' | 'dark' | 'system'

// Viewport preview
FORMIA.setViewport('phone'); // 'phone' | 'tablet' | 'desktop'

// Read current state
console.log(FORMIA.currentTheme);
console.log(FORMIA.currentAccent);

URL Theme Override

yoursite.html?theme=cobalt
yoursite.html?theme=terminal

Available Themes

| ID | Font | Palette | |----|------|---------| | earth | Fraunces | limestone + lime | | amber | Cormorant Garamond | black + gold | | terminal | JetBrains Mono | black + green | | editorial | Playfair Display | ivory + crimson | | cobalt | Unbounded | dark + electric blue | | professional | Libre Baskerville | white + navy | | kindergarten | Fredoka | pastel + pink | | beach | Pacifico | ocean + coral | | forest | Fraunces | dark green + sage | | digital | JetBrains Mono | CRT cyan + magenta | | manufacturing | Bebas Neue | dark + amber |

Studio Panel

Add these elements to your HTML to get the live theme studio:

<button id="studio-btn"><span class="spip"></span>FORMA Studio</button>
<div id="studio"><!-- panel markup from index.html --></div>

Press T to toggle the studio panel from any page.

Files

| File | Size | Purpose | |------|------|---------| | formia.css | ~8KB | Design tokens + layout primitives | | formia.js | ~15KB | Design engine + motion layer (one file) |

License

MIT © grxkun