Chorma — Bespoke Micro-Interaction Design

01 // Executive Overview

The Problem with Modern Agency Portfolios

Most agency websites rely heavily on off-the-shelf component templates, bloated WebGL shaders, or heavy video embeds that cripple mobile responsiveness and load speed.

Chorma was engineered to demonstrate that high-end motion design and instantaneous page speeds can coexist. By writing bespoke CSS keyframes and math-bound cursor calculations instead of importing massive libraries, the entire platform delivers fluid interactivity with zero bloat.

02 // Design System & Color Math

One Scale, Two First-Class Themes

Dark mode sits on a deep void, light mode on ghost white. Both share one semantic token scale, so a theme toggle swaps surface values without moving type, spacing, or borders.

03 // Motion Engineering & Physics

GPU Physics & Smooth Orbital Keyframes

04 // Code & Architecture Sandbox

The Motion Primitives, Unfiltered

Production patterns from the Chorma build. Switch tabs to compare the orbital motion engine against the semantic theme contract.

// OrbitalLoader — transform-only rotation, zero layout shift
import { motion } from "motion/react";

export function OrbitalLoader({ duration = 2.4 }: { duration?: number }) {
  return (
    <div className="relative h-28 w-28">
      <div className="absolute inset-0 rounded-full border border-white/10" />
      <motion.div
        className="absolute inset-0"
        animate={{ rotate: 360 }}
        transition={{ duration, repeat: Infinity, ease: "linear" }}
      >
        <span className="absolute left-1/2 top-0 h-2.5 w-2.5 -translate-x-1/2 rounded-full bg-white" />
      </motion.div>
      <motion.div
        className="absolute inset-4"
        animate={{ rotate: -360 }}
        transition={{ duration: duration * 1.6, repeat: Infinity, ease: "linear" }}
      >
        <span className="absolute bottom-0 left-1/2 h-2 w-2 -translate-x-1/2 rounded-full bg-zinc-500" />
      </motion.div>
      <span className="absolute inset-0 m-auto h-2 w-2 rounded-full bg-white/80" />
    </div>
  );
}