InfoCard Demo

Hover over items to see the info card. Try moving to the card to click links.

The card tracks your cursor vertically (optical stability) and positions itself on whichever side has the most room. Side-swaps, content changes, and show/hide all have a 300ms delay so you can move to the card. Drag the header to reposition; it auto-pins. Click 📌 to unpin and return to tracking mode.

Elements

Hydrogen

Atomic number 1

Helium

Atomic number 2

Carbon

Atomic number 6

Oxygen

Atomic number 8

Iron

Atomic number 26

Gold

Atomic number 79

Colours

Inline terms

The closure captures variables from its enclosing scope, which is fundamental to how callbacks work in event-driven architectures. A promise wraps an asynchronous operation and lets you chain thenables for sequential execution.

↑ Extra height so you can test vertical tracking at different scroll positions