← Bay House

Micro-Interactions with Purpose

15 production-quality interaction patterns for luxury editorial property websites. Every effect uses real spring physics, modern CSS, and zero dependencies.

10 Essential Micro-Interactions

Each pattern is built with Bay House property content. Spring physics via CSS linear(), typed custom properties, and compositor-friendly animations only.

Pattern 1

Spring-Physics Button

CSS linear() spring easing

Real spring overshoot on hover, instant compression on press. The linear() function creates physics-based motion that cubic-bezier() cannot express.

Pattern 2

Accordion Expand

grid-template-rows: 0fr → 1fr

Smooth height animation to auto using CSS Grid's row sizing. No fixed heights, no max-height hacks.

200mm reinforced Hebel block walls with vertical D12 steel rods, 500mm concrete ring beam, and 900mm deep foundations. Engineered to withstand coastal wind loads and seismic events.

325m² of Koemmerling German PVCu double-glazed windows with tilt & turn multi-lock system. 9-metre corner panorama windows frame uninterrupted ocean views. Steel inserts for coastal wind resistance.

90 evacuated solar tubes powering a 1,500-litre hot water system and 33-zone hydronic underfloor heating. 120,000+ litres of underground rainwater storage with filtration and UV treatment.

192 metres above sea level, more than 800 metres from the shoreline. Withstood Cyclone Gabrielle (2023) and the 2011 Waimarama floods — validating the geotechnical design and stormwater management.

Pattern 3

Elastic Badge Counter

@property <integer> + spring scale

Badge springs with elastic overshoot when a buyer saves the property to their shortlist. Compositor-only transform: scale.

Bedrooms 6 Bathrooms 5 Saved 0

Pattern 4

Text Decode Hover

number counter + story reveal

Hover or tap a row — the number counts up from zero while the story behind it fades in. Real Bay House property data.

  • Ocean Views 270°
  • Floor Area 590 m²
  • Elevation 192 m
  • Wrap Deck 382 m²
  • Rebuild Cost $5.96M

Pattern 5

Ocean Light Button

Cursor-tracking light bloom + letter-spacing breath + magnetic lerp

A deep ocean gradient surface with a warm light bloom that follows your cursor — like sunlight playing on water. Letter-spacing widens gently on approach. A gold edge-glow scales in from center. Magnetic pull via lerp interpolation. Pointer:fine devices only.

Pattern 6

Creative Link Interactions

luxury combo · kukuri bar · 3D flip · gradient sweep

Four genuinely different techniques — not variations of the same trick. The luxury combo layers a sliding vertical bar with a horizontal underline (two pseudo-elements, staggered timing). Then clip-path text reveal, CSS 3D flip with backface-visibility, and background-clip gradient morph. Each tells a different micro-story about architectural craft.

Luxury Living Coastal Privacy Modern Design Precision Built Guest House

Pattern 7

Morphing SVG Icons

stroke-dasharray ring draw + spring overshoot + ambient pulse

Four icons sharing one design language: a ring draws on hover and persists on activation. Menu morphs hamburger→× via spring overshoot (cubic-bezier(0.34,1.56,0.64,1)). Search and Back-to-Top have ambient pulse animations that accelerate on hover. Play crossfades triangle→pause bars via opacity. All GPU-composited.

Menu

Search

Play

Back to Top

Pattern 8

Daylight Lifestyle Card

CSS gradient overlay + opacity transition + JS phase swap

Five daylight phases reveal the property's changing mood — from a Pacific dawn to a violet night sky. Hover each icon to feel the light. Click any icon or the button to explore the full lifestyle page.

Bay House — Hawke's Bay

The light changes.
The view never does.

Dawn
Sunrise
Sunny
Sunset
Night

192 metres above sea level — every hour, a different painting.

Explore Life on the Hill

Pattern 9

3D Press-Depth Card

perspective tilt + radial light reflection

Subtle 3D tilt follows the cursor. Maximum rotation: 5 degrees. Radial light gradient tracks mouse position for physical realism.

590m²

Total floor area

Six bedrooms across three wings, five bathrooms, plus a fully self-contained 68m² guest house.

Pattern 10

Toast Notification

@starting-style + allow-discrete

Smooth entry via @starting-style, smooth exit via class toggle. Auto-dismisses after 4 seconds. Stacks from bottom.

5 Advanced Techniques

Cutting-edge CSS features: native popovers, scroll-driven animation timelines, CSS-only number counters, and stagger grid entrances — all with graceful fallbacks.

Bonus A

CSS-Only Popover

native popover + @starting-style

No JavaScript for show/hide. The native popover attribute combined with @starting-style creates smooth entry animations. The backdrop dims automatically.

Bay House — At a Glance

Elevated sanctuary: 590m² of living space on 1.5 hectares, 192 metres above sea level with 270° uninterrupted ocean views.

Enquiries over $4,500,000

Fully furnished. Move-in ready. Private sale by owners.

Bonus B

Scroll Progress Bar

animation-timeline: scroll(root)

Look at the top of the page — the sage green bar grows as you scroll. Pure CSS: animation-timeline: scroll(root block) drives a scaleX animation from 0 to 1. Zero JavaScript.

↑ Scroll the page to see the progress bar at the top

Bonus C

Counter on Scroll

@property + animation-timeline: view()

Pure CSS number counting — no JavaScript. Registers <integer> custom properties, then drives them from 0 to their final value as the element scrolls into view. Falls back to static numbers.

m²

Living space

°

Ocean views

L

Rainwater storage

Bonus D

Stagger Grid Entrance

view() + per-item animation delay

Each card animates in as it enters the viewport. Scroll-driven via animation-timeline: view() with IntersectionObserver fallback.

Solar Power

90 evacuated tubes

Rain Water

120,000L+ storage

Smart Home

Voice & app control

Heated Floors

33 independent zones

German Windows

325m² Koemmerling

Seismic Design

500mm ring beam

Bonus E

Floating Label Input

:placeholder-shown + sibling selector

The label floats up on focus or when the field has content. Pure CSS using :placeholder-shown — the contact form pattern.

Peer Review Dashboard

UX/UI audit status — updated as fixes land. Ratings: Eco (CPU/GPU efficiency), Paint (compositor vs layout), JS (runtime weight), Device (mobile/touch), Connection (slow 3G), UX/UI (interaction quality).

Pattern Eco Paint JS Device Connection UX/UI Verdict Action
1. Spring Button 10 10 10 10 10 10 ✅ KEEP Fixed: will-change scoped, ghost color, nowrap, arrow easing
2. Accordion 9 8 9 9 10 9 ✅ FIXED Fixed: open-state, ARIA, multi-open, overflow, reduced-motion
3. Badge Counter 10 10 9 10 10 9 🔄 REFRAMED Shortlist concept, ARIA live, contain:layout, :active, localStorage
4. Text Decode 8 8 8 8 8 9 ✅ FIXED Story text + decode, touch/click/focus, domain phrases
5. Ocean Light 10 10 10 10 10 10 ✅ REDESIGNED v2 Cursor-tracking light bloom, letter-spacing breath, gold edge-glow, ocean gradient, magnetic lerp
6. Creative Links 8 6 9 7 10 8 ✅ REBUILT v3 SVG arc retired (breaks at varied text length). Link A rebuilt as luxury combo: vertical terracotta bar (kukuri) + gradient underline. Paint/6: kukuri keyframes use left+width (layout paint). Device/7: hover-only, no touch equivalent for link effects
7. SVG Icons 9 9 9 9 10 10 ✅ REBUILT v3 Source: user-provided ring-path draw system. 4 buttons (2×2 grid). Peer-review additions: focus-visible (not outline:none), aria-pressed sync on toggle buttons, prefers-reduced-motion (ring always-drawn, sp-pulse/arrow-pulse off, ripple suppressed), keyboard ripple centering (no clientX fallback), will-change on button (not child SVG elements), dead CSS removed (sp2/sp3 were display:none with unreachable hover rules). Eco/9: stroke-dashoffset triggers SVG paint (not layout). UX/10: ring persist is clear persistent feedback; spring overshoot is delightful; ambient animations add life without noise.
8. Daylight Card — — — — — — ⏳ Pending New component — replaces Value Counter. 5 daylight phase icons in one row. Hover → CSS gradient overlay (opacity transition). Dark phases (dawn/night) → .dc-dark text adaptation. Icon click + CTA link → /bay-house-lifestyle/ placeholder. Fluid --dc-size: clamp(40px,6vw,64px). Awaiting audit.
9. 3D Press Card — — — — — — ⏳ Pending Awaiting audit
10. Toast — — — — — — ⏳ Pending Awaiting audit
A. Popover — — — — — — ⏳ Pending Awaiting audit
B. Scroll Progress — — — — — — ⏳ Pending Awaiting audit
C. Counter Scroll — — — — — — ⏳ Pending Awaiting audit
D. Stagger Grid — — — — — — ⏳ Pending Awaiting audit
E. Float Label — — — — — — ⏳ Pending Awaiting audit