cie-ds · personal / internal · not for public adoption

Two inks.
Snappy motion.

Portable tokens and micro-interactions from Creativity Is Everywhere — Outfit + DM Mono, paper on ink, expo settles, thin scrollbar, scroll reveals, click-to-expand, sheets, optional per-section UI sound. Copy a pattern; leave the rest.

Include

Plain CSS + one script. No npm. No build.

<link rel="stylesheet" href="https://cie-ds.vercel.app/tokens.css">
<link rel="stylesheet" href="https://cie-ds.vercel.app/base.css">
<link rel="stylesheet" href="https://cie-ds.vercel.app/scrollbar.css">
<link rel="stylesheet" href="https://cie-ds.vercel.app/motion.css">
<link rel="stylesheet" href="https://cie-ds.vercel.app/scroll.css">
<link rel="stylesheet" href="https://cie-ds.vercel.app/interactions.css">
<script src="https://cie-ds.vercel.app/interaction.js" defer></script>

Colour

Ink + paper only. Hierarchy via size and weight — never a third hue.

Ink#0b0b0b
Paper#f3f2ee
Ink mute#9c9c98
Paper mute#66665f

Type

.cie-breath · weight 300→640 on hover. .cie-press · 3px nudge.

Mark · Outfit 300

creativity

Title · breath

A block becomes the page

Row · breath + press

Work

Body 16 / 1.5 · 62ch

Anyone can put a language model behind a chat window. Very few people can make the result feel like something.

Register

01 / 06 · New York · Est. 2006

Scrollbar

scrollbar.css — 5px, pill thumb, transparent track. Firefox scrollbar-width: thin. Scroll this page to feel it.

Nested scroll surface — same thin bar on paper or ink.

Line 01

Line 02

Line 03

Line 04

Line 05

Line 06

Line 07

Line 08

Loader · シュパシュパ

.cie-loader · complementary (site has none). Expo pulse, two-ink block.

Loading

Micro-interactions

.cie-breath .cie-press .cie-tap .cie-lift .cie-invert .cie-arrow .cie-uline .cie-pbtn

Lift + tap

Hover me

Card rises 2px; press scales to 0.97.

Arrow + underline

Open the move

Site

Panel buttons

Hamburger → X + Nav Panel

.cie-hamburger morphs to X on --cie-t-move expo. Panel slides in, synced icon, aria-expanded, Escape / backdrop close.

Click to open

Text Loading · Quiet Variants

data-cie-text="fade-up|soft-wipe|letter-fade|line-rise|pulse-dot"
For CIE company site — refined, not flashy. NOT portfolio scramble/pixelate.

fade-up (default)

Creativity is everywhere

soft-wipe (clip-path)

Block becomes page

letter-fade (stagger)

Snappy settle

pulse-dot (minimal loading)

Loading

Animation Gallery · Replay

Interactive demos with replay controls. Each sample can be triggered again. IntersectionObserver auto-plays when scrolled into view. Snappy CIE aesthetic—no flashy AI scramble.

Expand Morph (cell → panel)

List Stagger (rise + delay)

  • First item0ms
  • Second item24ms
  • Third item48ms
  • Fourth item72ms

Card Rise (pop + lift)

Pop

Scale 0.8 → 1

Staggered

24ms delay

Lift

-2px on hover

Text Load Variants

fade-up

Block becomes page

soft-wipe

Smooth reveal

Expand · にゅるっと but fast

Click a cell — it morphs into a panel in --cie-t-move (360ms) with --cie-ease-expo. Optional .cie-expand--snap adds a subtle overshoot. Signature move from the company board, portable.

Sheet · modal

data-cie-sheet-open + .cie-sheet · 300ms expo. .cie-sheet--center uses subtle --cie-ease-snap overshoot. Escape / backdrop / close button. Honour reduced-motion.

Focus ring sample

Scroll reveal

data-cie-reveal="rise|fade|slide|slide-right|pop|blur|clip" · observed once by interaction.js. Parent .cie-reveal-stagger sets --i.

RisetranslateY
Fadeopacity only
Slidefrom left
Slide rightfrom right
Popscale 0.92
Blur--cie-blur-in → 0
Clipinset(100% 0 0 0) → 0

Parallax

data-cie-parallax="0.35" speed · JS writes --cie-py. Capped by --cie-parallax-max. Disabled under reduced-motion.

→ See parallax.html for a full-page scroll-linked theme morph experience (ink ↔ grey ↔ paper with contrast-safe UI).

Shift

scroll-linked · subtle

Scroll hooks

data-cie-progress writes --cie-progress (0–1) for the page — the hairline at the very top of this page — or ="#id" for one element; .cie-progress-bar draws it. data-cie-hide-header toggles .is-hidden on scroll down / up. data-cie-scrollspy marks the link whose section is in view. Scroll inside the box.

cieWork · About · Contact

01

Reveal — blocks rise, blur or wipe in as they enter.

02

Parallax — layers drift against the scroll, capped by a token.

03

Progress — one value, zero to one, drawn as a hairline of ink.

04

Scrollspy — the table of contents follows where you are.

Click-to-cycle

data-cie-cycle="Idle|Working|Done" · pipe-separated states. Click advances. Optional sound if inside an armed sound section.

Section sound · Hover + Click

Not a global mute. Wrap a region in data-cie-sound, add data-cie-sound-toggle, enable data-cie-hover-sfx. When ON, interactions inside play short Web Audio tones (no files). Multiple presets available. This section plays sound on both hover AND click. Respects reduced-motion; unlocks after gesture.

Playable section

Speaker toggle · local only

Preset:

Toggle Sound ON first (you'll hear an immediate test beep), then choose a preset and click the controls above. The "Play Test" button (dark) lets you verify sound without changing state. Outside this panel, the rest of the page stays silent. Presets: soft-tick, paper-snap (default), glass-pip, low-thud, bright-confirm.

v0.4.1 fix: Sound now plays clearly (~0.4 gain), works with reduced-motion, robust unlock with retry.

Section sound · Click Only

No hover SFX — sound plays ONLY on click/activate, not on hover. Same preset system. Toggle ON and click controls—you'll hear clear tones without hover noise. Verify with "Play Test". Gain 0.4 (clearly audible).

Click-only section

No hover · Click/tap only

Preset:

Toggle Sound ON, then click the controls above. No sound on hover in this section (no data-cie-hover-sfx attribute). Perfect for users who find hover SFX distracting. Immediate test beep on toggle, loud "Play Test" confirms audio works.

Organic / Slow Motion

Complement to snappy UI chrome. Soft drift, breath, gentle float, slow morph loops. CSS-driven, reduced-motion safe. For ambient elements, backgrounds, not primary UI.

drift (8s)

breath (6s)

float (10s)

morph (12s)

Ambient stage with soft blobs

Organic background

Japanese · :lang(ja)

Tracking 0 · leading 1.8 · palt.

創造性は、いたるところにある。

トラッキングは 0。行間は広め。ウェイトの呼吸は Outfit と同じくホバーで太くなる。

Source aesthetic: creativityiseverywhere.com (main tokens). Package license: proprietary — view OK, no redistrib / commercial reuse. Version 0.4.0 — New: hamburger nav, text loading family, sound presets, organic motion, theme morph. See README · DESIGN.md · Parallax demo · LICENSE. Repo takaoumehara/cie-ds.