---
name: Optic Halo
slug: optic-halo
version: "1.0"
tier: premium
price: 29
type: Portfolio Kit
axis: densité extrême
full-kit: https://www.stacklift.design/kit/optic-halo
theme: light
fonts:
  display: Bodoni Moda
  body: Hanken Grotesk
colors:
  ink: "#13233F"
  sand: "#ECE4D6"
  coral: "#EF7F6B"
  paper: "#F6F1E8"
tags:
  - eyewear
  - optician
  - full-screen
  - typographic
  - capsule-navigation
  - editorial
collections:
  - Everyday
  - Statement
  - Sun
  - Reading
dependencies: 0
external-resources:
  - Google Fonts
---

# Optic Halo — Design System v1.0 · a Stacklift kit

Full-kit: https://www.stacklift.design/kit/optic-halo

Optic Halo is a full-screen eyewear kit where the navigation *is* the product.
Stacked capsule-collections fill the viewport in Bodoni Moda; a coral halo
follows the cursor and flips each capsule to deep ink-blue on hover. One bold
gesture up front — and deliberately calm product sheets behind it. Built for
resale to independent opticians, frame makers, and DTC eyewear brands.

## Axis of rupture

Densité extrême — the menu is the content. Each collection is a viewport-scale
typographic capsule, not a list item. Saturated colour and oversized type carry
the whole structure; the product sheet is the radical rest zone that balances it.

## Signature gesture

A roaming halo cursor swells and reveals a coral bleed behind the hovered
capsule, flipping it to ink-blue with paper-coloured type. One dominant gesture,
activated — never two gestures competing. The slide-up product sheet has no
halo, no capsule: cold white, cold numbering, oversized portrait. Imitates
pointer physics (lerp follow), never exceeds it.

## Palette

- Bleu encre `#13233F` — off-black, structure, active capsule
- Sable `#ECE4D6` — capsule at rest, product figure ground
- Corail tendre `#EF7F6B` — halo, bleed reveal, signal
- Paper `#F6F1E8` — page ground

## Type

- Display — Bodoni Moda 700/900: capsule labels, product names, headlines
- Body — Hanken Grotesk 400/600: labels, specs, captions, UI

## Components

- Halo cursor (lerp follow, swells over interactive elements)
- Capsule-collection stack (viewport-scale, hover-reactive)
- Bleed-disc reveal (coral, multiply blend)
- Slide-up product sheet (the rest zone, prev/next navigable)
- Design System view (menu-as-index: palette, type, gesture, components)
- Greyed inert demo links (`is-soon`)

## Collections

01 — Everyday · 02 — Statement · 03 — Sun · 04 — Reading

## Craft

Vanilla HTML / CSS / JS. Zero dependencies — Google Fonts is the only external
resource. One self-contained `index.html` + this `design.md`. Fully responsive,
ready to customise.

## Tunable constants

- Halo follow friction — lerp factor `0.18` in the animation loop
- Bleed reveal speed — transform transition `.7s` on `.cap .bleed`

One kit, one creative direction.