Skip to content

Attention Site

A whole website made of anomalies, one room per screen: koi in dry air, a shadow that runs to its lamp, a stone the scroll breaks upward, chrome that fuses, steel that pours, plans that lift off the floor and a footer crossed by shark shadows.

ProAttentionminimal

This is a viberdy Pro component · launch price

The live preview and props panel are open to everyone. Pro unlocks the full source, the AI prompt and CLI install for this and every other Pro entry: from $19/month, kept while you stay subscribed, or Lifetime $161 once. Launch prices end 31 Oct.

Unlock Pro · from $19/mo

All 17 kits are in Lifetime, $161 once.

Already Pro? Sign in
Preview

Fig. 02 / The studioLamp: left of centreShadows: 5 cast away / 1 cast toward

Every room has one thing wrong.

We take a rule you never think about (water holds fish, stone falls, shadows run from the light) and break it in a room that is otherwise perfectly ordinary. Everything else stays obedient, so the one wrong thing is all you see.

Plans

Three ways to keep a room.

Borrow one, have one made, or let one change with the seasons. Every room is installed, lit and looked after by the studio.

  • Loan

    $4,800per week

    A finished room from the collection, lent for a launch, a show or a season.

    • Any room in the collection
    • Installed and struck in a day
    • From one to twelve weeks
    Book a loan
  • Commission

    Most rooms start here

    $38,000one time

    A room made for your space, built around the one rule it breaks.

    • A site visit and a light study
    • One anomaly, built for the room
    • Two years of tuning visits
    Commission a room
  • Residency

    $2,900per month

    A room that breaks a different rule every season.

    • A new anomaly each quarter
    • Changed overnight, never in hours
    • Ends with any season
    Ask about a residency

Props

No runtime dependencies
"use client";

import { createContext, useContext, useEffect, useId, useRef, useState, useSyncExternalStore } from "react";
import type { ComponentPropsWithoutRef, CSSProperties, FormEvent, ReactNode, RefObject } from "react";

/**
 * AttentionSite — the Aerium page: one room per screen, each with exactly one thing wrong.
 *
 * A nav whose link labels hang in the air floats over the page. The rooms,
 * top to bottom: koi in a dry concrete room inside one shaft of light (the
 * hero); a wall of mounted letters whose shadows all run from the lamp but
 * one; a jellyfish in dry air; a stone that the scroll breaks upward and
 * gathers again on the way back; chrome drops that neck and fuse in an LED
 * room; bearing steel that pours like water; a swarm of jellyfish that lights
 * the list of places beside it; three plan slabs that lift off a lit floor;
 * a commission form in a gallery full of water light with no water, whose
 * typed words hang above their fields; and a footer crossed by shark shadows
 * with no sharks. Each WebGL room mounts as it approaches and is released

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}
Notes

About this whole site

Attention is the library's style of anomalies: familiar things made wrong, so the eye stops on them. This is the whole site, built for a demo studio called Aerium that makes rooms where exactly one thing is wrong. The first screen is a concrete room with butterfly koi hanging in a shaft of light, and no water. Then a wall of mounted letters where every shadow runs from the lamp except one, a jellyfish lighting a room it should not be in, a stone that breaks upward as you scroll and gathers itself as you scroll back, chrome drops that neck and fuse under an LED strip, and a floor of bearing steel that pours like water. A swarm of jellyfish lights the list of places to see the rooms, three plan slabs lift off a lit floor, and the commission form floats its typed words above their fields while a small bell breathes as the brief is sent. The footer is lit water crossed by shark shadows with no sharks. A nav whose link labels hang in the air floats over all of it. Every room has a Pause motion control, and reduced motion shows each one settled.

Curator’s note

The Attention kit as one page; every Attention entry is cut from it byte for byte. Pro: eight hand-written WebGL2 rooms (no three.js) that mount as they approach and give their GPU context back when they are three screens away, a scroll-pinned shatter driven through the site's own scroller, and a commission form whose success is only shown after its required handler resolves. Cut byte for byte from the Attention kit's one site (AttentionSite), so it reads as one system with the kit's rooms: one subject, one motivated light, one broken rule.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

NewPro

Ultra Site

site templates

The whole Ultra page, told by the scroll: a glass prism of the reader's own values, a specimen played value by value, a light you set, tools that learn, plans and a footer, all retuned by one shared dial.

landing pagewebsite templateadaptive
NewPro

Three plan slabs that lift off a lit floor as the section arrives, each over its own soft shadow; the featured one rises highest and the pointer raises any slab higher.

pricingpricing cardsplans
Pro

Holo Gloss Site

site templates

The complete Holo Gloss landing, told by the scroll: cards that open from a pile into a fan and are flown into, a dark room where the app slides through its cards, a bento whose tiles trade height, a word that pulls out of its own letter into the plans, a sign-up and a real footer. Branded viberdy; every word is a prop.

landing pagewebsite templatescroll animation