Skip to content
innovando.space

Effects / Cards

Pixel Card

Testing

A grid of tiny pixels lights up across the card in a wave from where the pointer enters, shimmers or moves aside as you go, and drains away through the point where you leave.

activation="hover"

Enter from any side

The pixels light up in a wave from the point where your pointer comes in, shimmer while you stay, and drain away through the point where you leave. Reach the button with the Tab key and the wave starts from the centre.

Default. Lit by the pointer or by keyboard focus inside the card.

activation="always"

Already on

The first time the card comes into view, the wave plays once from the centre. Then the pixels stay lit and still. Hover it and they shimmer.

For a featured item, and for touch screens, where there is no hover.

--ifx-pixel-card-repel: 14

Magnetic

Finer pixels, a wave that speeds up and slows down. Once they cover the card, move your pointer inside it: the pixels gently move aside, as if pushed by a magnet, and settle back when you go. Leave the card and they drain away through that point.

One variable switches the magnet on. At zero, the card behaves as above.

Same mechanics, another identity

Green field, bigger pixels, no shimmer.

Same component. The website chose three greens and blues, larger and closer pixels, a slower wave, rounder corners and pixels that hold still. Nothing in the package changed.

Proof of the rule: two websites, one effect, no resemblance.

Use it in a website

Wrap any content in the component. What you put inside stays your own HTML:

---
import PixelCard from '@innovando/in-fx/components/PixelCard.astro';
---

<PixelCard as="article">
  <h3>Your title</h3>
  <p>Your text. Links and buttons stay fully reachable.</p>
</PixelCard>

Then give it the website's identity from the website's stylesheet. Three colours are mixed at random across the grid; with one colour set three times, the card lights up in a single tone.

/* In the website's own stylesheet — not in the package */
.ifx-pixel-card {
  --ifx-pixel-card-color-1: #3ddc97;
  --ifx-pixel-card-color-2: #00b3ff;
  --ifx-pixel-card-color-3: #c6f432;
  --ifx-pixel-card-pixel: 4px;
  --ifx-pixel-card-gap: 4px;
}

Variables

Every visual or timing decision is a CSS variable with a fallback.

VariableFallbackWhat it does
--ifx-pixel-card-color-1WebKit accent → currentColorFirst pixel colour
--ifx-pixel-card-color-2WebKit accent strong → currentColorSecond pixel colour
--ifx-pixel-card-color-3WebKit focus → currentColorThird pixel colour
--ifx-pixel-card-pixel3pxSide of one pixel
--ifx-pixel-card-gap5pxSpace between two pixels
--ifx-pixel-card-density0.9Share of pixels that light up, 0–1
--ifx-pixel-card-pixel-strength0.85Maximum opacity of the pixels
--ifx-pixel-card-wave700msTime the light-up wave takes to cross the card
--ifx-pixel-card-release450msTime the fade-out wave takes
--ifx-pixel-card-fade220msTime a single pixel takes to light up
--ifx-pixel-card-shimmer0.4How much the pixels shimmer under the pointer, 0–1 (0 = still)
--ifx-pixel-card-shimmer-period1800msLength of one shimmer
--ifx-pixel-card-repel0How far, in px, the pixels move away from the pointer (0 = no magnet)
--ifx-pixel-card-repel-radius90Distance from the pointer, in px, within which pixels move aside
--ifx-pixel-card-repel-follow260msHow softly the pixels follow: move away and come back
--ifx-pixel-card-radiusWebKit radius → 0pxCorner radius
--ifx-pixel-card-surfaceWebKit surface → CanvasCard background
--ifx-pixel-card-inkinheritText colour inside the card
--ifx-pixel-card-paddingWebKit large spacing → 2remInner padding
--ifx-pixel-card-hairlinecurrentColor at 16%Resting outline
--ifx-pixel-card-hairline-litcurrentColor at 28%Outline when lit
--ifx-pixel-card-hairline-width1pxOutline width
--ifx-pixel-card-transition320msOutline light-up time

How it behaves for everyone

  • Keyboard

    Keyboard focus inside the card starts the wave from the centre. A mouse click does not keep it lit. Your focus ring stays instant and untouched.

  • Touch

    There is no hover on a phone: in hover mode the card rests, and the magnet is off. Use activation="always" where the pixels matter on touch.

  • Reduced motion

    The pixels appear all at once and hold still: no wave, no shimmer, no magnet.

  • High contrast

    In forced-colours mode the pixels are removed and the outline uses the system colour.

  • Without JavaScript

    The pixels are drawn by a small script. Without it you get the content in a clean card.

  • Performance

    The pixels are drawn on one canvas per card, only while something moves. When the wave is over, the pixels have settled and the pointer is still or gone, or the card is off screen, nothing runs.