Aqua 2
Aqua 2 is a self-contained UI framework for the web, inspired by Apple's AQUA design language.
Installation
Aqua 2 ships as a single Javascript file — aqua2.js — that injects its own styles and activates all interactive components automatically.
Add aqua2.js to your project
Drop in the local file for production or reference the jsDelivr CDN for rapid prototyping.
Local file
Download aqua2.js, place it in your project, and then add a single script tag before </body>.
<script src="aqua2.js"></script>jsDelivr
Reference directly from jsDelivr. Although not suitable for high-traffic production sites, it's great for quick demos just like this one.
<script src="https://cdn.jsdelivr.net/gh/thatdhruv/aqua2@master/aqua2.js"></script>UI Components
"One of the design goals was when you saw it you wanted to lick it"
— Steve Jobs
Component Reference
Click any tab to see a live demo and copy the HTML. Every class is a standalone drop-in — no wrappers required except where noted.
Push Buttons — all variants
Glass pill. Flashes system blue on press. aqua-button-focused breathes blue — the default dialog action. Circular buttons suit icon/glyph actions; square buttons suit image thumbnails or larger glyphs. All shapes have a graphite twin (see Graphite tab).
<button class="aqua-button">Cancel</button>
<button class="aqua-button-focused">Continue</button>
<!-- Circular (icon/glyph) -->
<button class="aqua-button-circular"><!-- SVG --></button>
<button class="aqua-button-circular-focused"><!-- SVG --></button>
<!-- Square (image/larger glyph) -->
<button class="aqua-button-square"><!-- SVG / img --></button>
<button class="aqua-button-square-focused"><!-- SVG / img --></button>aqua-radio
On selection the shell fills with system blue and a small glass dot springs in at centre. All options in a group must share the same name.
<label class="aqua-radio">
<input type="radio" name="group" />
<span class="aqua-radio-control"></span>
<span class="aqua-radio-label">Option</span>
</label>aqua-checkbox
Glass rounded square that springs on check, drawing the checkmark stroke by stroke with a subtle Aqua pop. The two inner <span>s form the animated strokes — don't omit them.
<label class="aqua-checkbox">
<input type="checkbox" />
<span class="aqua-checkbox-control">
<span class="aqua-checkbox-left"></span>
<span class="aqua-checkbox-right"></span>
</span>
<span class="aqua-checkbox-label">Option</span>
</label>aqua-input / aqua-select
Pill text fields with a blue focus ring. The aqua-select morphs from a pill into a rounded panel on open — the right cap shows the variant colour (blue or graphite) with up/down triangles indicating it's a pop-up control.
<input class="aqua-input" type="text" placeholder="…" />
<div class="aqua-select">
<div class="aqua-select-trigger">
<div class="aqua-select-value-wrap">
<span class="aqua-select-value">Choose…</span>
</div>
<div class="aqua-select-cap"><!-- ▲▿ SVG --></div>
</div>
<div class="aqua-select-panel">
<div class="aqua-select-option" data-value="a">Option A</div>
</div>
</div>aqua-slider
Pill-track slider with a pill-shaped white thumb. The fill grows from the left in blue. Thumb goes translucent and scales up while dragging — mirroring the tab indicator. Click anywhere on the track to spring the thumb to that position.
<div class="aqua-slider"
data-min="0" data-max="100" data-value="40">
<div class="aqua-slider-track">
<div class="aqua-slider-fill"></div>
<div class="aqua-slider-thumb"></div>
</div>
</div>aqua-progress / aqua-progress-indeterminate
Determinate bars show fixed progress with animated water-rib texture. Set width via data-value (0–100). Indeterminate bars use the classic Aqua backslash barber pole.
Determinate — Blue
Indeterminate
<!-- Determinate -->
<div class="aqua-progress" data-value="65">
<div class="aqua-progress-fill"></div>
</div>
<!-- Indeterminate -->
<div class="aqua-progress-indeterminate"></div>aqua-scrollbar
Pill-shaped scrollbar with a textured thumb (same dim-notch pattern as the determinate progress bar). Two arrow buttons: placed together at the right end (default) or one at each end via aqua-scrollbar-buttons-end. Drag the thumb or click the track to scroll.
Blue — buttons together (right end)
Blue — buttons at each end
Graphite — buttons together
<!-- Buttons together at right end (default) -->
<div class="aqua-scrollbar" data-value="30" data-thumb-size="30">
<div class="aqua-scrollbar-track">
<div class="aqua-scrollbar-thumb"></div>
</div>
<div class="aqua-scrollbar-buttons">
<button class="aqua-scrollbar-button aqua-scrollbar-previous"><!-- ◁ SVG --></button>
<button class="aqua-scrollbar-button aqua-scrollbar-next"><!-- ▷ SVG --></button>
</div>
</div>
<!-- Buttons at each end -->
<div class="aqua-scrollbar aqua-scrollbar-buttons-end">
<button class="aqua-scrollbar-button aqua-scrollbar-previous"><!-- ◁ --></button>
<div class="aqua-scrollbar-track">
<div class="aqua-scrollbar-thumb"></div>
</div>
<button class="aqua-scrollbar-button aqua-scrollbar-next"><!-- ▷ --></button>
</div>aqua-tabview
Frosted-glass segmented control. The indicator slides with a spring and can be dragged. On mobile it scrolls horizontally, centring the active tab with neighbours peeking at the edges. Mark a tab disabled to dim and block it.
<div class="aqua-tabview-wrap">
<div class="aqua-tabview" data-content-prefix="my-tab">
<div class="aqua-tabview-indicator"></div>
<div class="aqua-tabview-tab active" data-tab="one">One</div>
<div class="aqua-tabview-tab" data-tab="two">Two</div>
<div class="aqua-tabview-tab disabled" data-tab="three">Disabled</div>
</div>
</div>
<!-- Content panels -->
<div class="tab-pane active" id="my-tab-one">…</div>
<div class="tab-pane" id="my-tab-two">…</div>Graphite palette — all components
Every component has a graphite twin — swap aqua- for graphite- on the wrapper class. The graphite palette uses neutral grey instead of system blue, suited for secondary UI elements or apps preferring a minimal accent colour.
Buttons
Radio
Checkbox
Input & Select
Slider
Progress
Scrollbar