Amino Acid Conditioner
Regular price
From $ 19
Featured collection
Collections
Islands Architecture Demo
Island hydration is a performance pattern where the server renders all HTML upfront, and JavaScript only loads for interactive components — called "islands" — when they're actually needed.
Each card below uses a unique custom element tag with a different hydration directive. The runtime loads each island's JS independently based on its trigger — watch them transition from "Waiting" to "Hydrated" at different times.
client:idle
Waiting
Hydrates when the main thread is free (requestIdleCallback). Best for components needed soon but not critical to first paint.
Hydrated at: --:--:--.---
client:visible
Waiting
Hydrates when the element enters the viewport (IntersectionObserver). Ideal for below-the-fold content like footers or product recommendations.
Hydrated at: --:--:--.---
client:media (desktop)
Waiting
Hydrates only when the viewport is ≥768px. On mobile this card stays in "Waiting" — resize your browser to see it activate.
Hydrated at: --:--:--.---
client:media (mobile)
Waiting
Hydrates only when the viewport is <768px. On desktop this card stays in "Waiting" — the inverse of the card above.
Hydrated at: --:--:--.---
client:defer
Waiting
Hydrates after a fixed delay (2 seconds here). Useful for non-critical components you want to defer without waiting for user interaction.
Hydrated at: --:--:--.---
client:interaction
Waiting
Hydrates on hover, touch, or focus. Try hovering over or tabbing to this card. Perfect for components that are inert until the user engages.
Hydrated at: --:--:--.---
Nested Islands
When a parent island hydrates, the runtime re-walks its children to discover nested islands.
Child islands are skipped during the initial DOM scan — they only activate
after their parent loads. Hover over the parent to hydrate it (via client:interaction),
then watch the child start its own client:defer countdown.
Parent (client:interaction)
Waiting
Hover, touch, or tab into this card to hydrate it. Once it does, the runtime discovers the child island below.
Hydrated at: --:--:--.---
Child (client:defer 1s)
Waiting
This child island is invisible to the runtime until the parent hydrates. Then it waits 1s before activating. Compare the timestamps to see the cascade.
Hydrated at: --:--:--.---
Event Log
Live feed of islands:load events dispatched
by the hydration runtime as each island activates.
Waiting for events…