Guides & FAQ
Everything on record.
How the effects get into a website, what the labels promise, and the answers to the questions we hear most. Kept here, next to the work, so nobody has to remember them.
Using an effect in a website
- Pick an effect marked Stable. Experiments and effects in testing stay in the lab. The label on each effect comes from the product itself, not from this page.
- Add the package to the website. It is called
@innovando/in-fxand comes from Innovando's package registry, at a fixed version. A website that does not need it simply does not install it. - Wrap the content. The component is a container: titles, text and buttons inside it remain the website's own HTML.
- Give it the website's identity. Colours, corners, glow and timing are set in the website's stylesheet through the documented variables — see Border Glow for the full list.
- Check it like any other release. Keyboard, touch, reduced motion and a performance trace on the preview address, before it goes live.
Frequently asked questions
Does it work without JavaScript?
Yes. Every effect starts from complete, readable HTML. Without JavaScript you get the content and a clean card; the light is added on top when the browser can run it.
Is it accessible?
The light is decorative and hidden from assistive technology. Content stays reachable with the keyboard, keyboard focus lights the card like the pointer does, reduced-motion preferences are respected, and forced-colours mode removes the decoration.
Can a website change the colours?
It has to. The package contains no colour of its own: palette, corners, glow and timing are CSS variables set by the website. If nothing is set, the effect borrows the colours of the site’s WebKit theme.
Will it slow the website down?
Each effect is measured with a performance trace before it moves from Experiment to Testing. Border Glow uses one pointer listener per page and an animation loop that stops when nothing changes or the card is off screen.
Why not a third-party library or a page-builder plugin?
Because the infrastructure is part of the product. Our effects are written in-house, versioned in our own forge, served from our own servers, and load nothing from third parties.
Why does a glass card look plain on some pages?
Glass shows what lies behind it, blurred. On a flat, uniform background there is nothing to blur, so a glass card reads as a tinted card with lights. Place it over an image, a pattern or shapes and the glass appears.
Why does an effect stay still on my phone?
A touch screen has no pointer hovering over the page, so effects that answer the pointer rest quietly there — except Border Glow, whose lamp makes one lap of the edge on its own. Where the light matters on a phone, the website switches the effect on by itself (activation="always"): it plays once, then stays lit and still.
Which browsers are supported?
Current versions of Chrome, Edge, Safari and Firefox. Older browsers receive the content without the effect rather than a broken page.
Can I use an effect marked Experiment on a client website?
No. Experiments live here, in the lab. A client website only uses effects marked Stable, at a fixed version.
Something missing? Write to sales@innovando.swiss.