Effects / Cards
Border Glow
TestingA light on the card outline that slides to the edge point nearest the pointer and takes the colour of the edge it lands on.
Live demos
activation="pointer"
Follows you
Approach any edge. The closer you are, the brighter it burns; at 160 px it is off. The button below is a keyboard test: reach it with the Tab key and the card lights up without the mouse.
activation="orbit"
Travels on its own
One lap in four and a half seconds, then it rests, lit. Motion that starts by itself stops within five seconds; scroll the card away and back to see it again.
Same mechanics, another identity
This is not our card any more.
Same component, same code. Only the website's variables change: a cool palette, tight corners, a light surface, a longer reach. That is the rule of the lab — the mechanism is shared, the look is never.
Use it in a website
in-fx is an optional add-on of our WebKit: a site installs it only if it needs it, and a site that does not use it downloads nothing. Install it from our package registry:
npm install @innovando/in-fxWrap any content in the component. What you put inside stays your own HTML:
---
import BorderGlow from '@innovando/in-fx/components/BorderGlow.astro';
---
<BorderGlow as="article">
<h3>Your title</h3>
<p>Your text. Links and buttons stay fully reachable.</p>
</BorderGlow>Then give it the website's identity from the website's stylesheet. The package never decides a colour: if you set nothing, it borrows the WebKit tokens of the site, and without those it uses the current text colour.
/* In the website's own stylesheet — not in the package */
.ifx-border-glow {
--ifx-border-glow-color-1: #0a84ff;
--ifx-border-glow-color-2: #30d158;
--ifx-border-glow-color-3: #64d2ff;
--ifx-border-glow-radius: 4px;
--ifx-border-glow-reach: 220;
}Variables
Every visual or timing decision is a CSS variable with a fallback. Numbers without a unit are read by the runtime as pixels or milliseconds.
| Variable | Fallback | What it does |
|---|---|---|
--ifx-border-glow-color-1 | WebKit accent → currentColor | First colour of the palette wheel |
--ifx-border-glow-color-2 | WebKit accent strong → currentColor | Second colour of the palette wheel |
--ifx-border-glow-color-3 | WebKit focus → currentColor | Third colour of the palette wheel |
--ifx-border-glow-angle | 0deg | Where the palette wheel starts |
--ifx-border-glow-radius | WebKit radius → 0px | Corner radius of the card |
--ifx-border-glow-surface | WebKit surface → Canvas | Card background |
--ifx-border-glow-ink | inherit | Text colour inside the card |
--ifx-border-glow-padding | WebKit large spacing → 2rem | Inner padding |
--ifx-border-glow-hairline | currentColor at 16% | Colour of the resting outline |
--ifx-border-glow-hairline-width | 1px | Width of the resting outline |
--ifx-border-glow-filament | 1.5px | Width of the bright line on the edge |
--ifx-border-glow-spread | 140px | How long the lit stretch of edge is |
--ifx-border-glow-brightness | 1 | Maximum opacity of the filament |
--ifx-border-glow-halo | 28px | How far the bloom reaches outside the card |
--ifx-border-glow-halo-strength | 0.7 | Maximum opacity of the bloom |
--ifx-border-glow-wash | 0.1 | Strength of the tint inside the card |
--ifx-border-glow-reach | 160 | Distance in px beyond which the lamp is off |
--ifx-border-glow-attack | 140 | Time in ms to light up |
--ifx-border-glow-release | 320 | Time in ms to fade out |
--ifx-border-glow-follow | 90 | Lag in ms with which the lamp follows the pointer |
--ifx-border-glow-focus | 480 | Time in ms for the keyboard light-up and for gliding between focused controls |
--ifx-border-glow-orbit | 4500 | Time in ms for one lap in orbit mode |
--ifx-border-glow-orbit-laps | 1 | Laps before the lamp rests, lit; 0 means endless (needs a pause control) |
--ifx-border-glow-park | 0.08 | Resting position along the edge, 0–1 |
How it behaves for everyone
Keyboard
When focus enters the card, the lamp fades in softly next to the focused control, and glides along the edge as focus moves. Your own focus ring stays instant and untouched.
Touch
No pointer to follow, so the lamp makes one lap of the edge and rests, lit.
Reduced motion
The lamp stays lit and still at its resting point. The effect is there; it just does not move.
High contrast
In forced-colours mode the decorative light is removed and the outline uses the system colour.
Without JavaScript
A clean card with its outline. The light is an addition, never a condition.
Performance
One pointer listener per page, one loop that sleeps when nothing changes. No blur filter: the bloom is a soft gradient, cheap to repaint on every frame.