An animated dot-grid background for the front page of a Platform Manager module. The dots follow the app's Bifrost theme and color mode by default, or use a color you choose. The rest of the look is fixed on purpose.
Install
Requires @intility/bifrost-experimental, installed and set up. Then import the component:
import TwinkleBackground from "@intility/bifrost-experimental/TwinkleBackground";Usage
Render it as the first child of the container that wraps the whole front page, and give that container position: relative and isolation: isolate:
const FrontPage = () => (
<div className="page">
<TwinkleBackground />
{/* page content */}
</div>
);.page {
position: relative;
isolation: isolate;
}The dots cover the top 35% of the viewport height, whatever the height of the container, so the background looks the same on every front page. On a short viewport they still cover at least 240px. If the container is shorter than that, they cover the whole container. Content that scrolls below the fold doesn't stretch them.
The page should have one plain --bfc-base-1 background all the way down. Anything between the page and the dots, like a section with its own background color, hides them.
Inside a Box
By default the dots cover the top 35% of the viewport height and fade out, which suits a whole page. To use the background in a smaller container, like a Box or a card, set fill. The dots then cover the whole container, evenly, with no fade. Give the container position: relative and isolation: isolate, as above.
The dots are centered with a margin of at least 8px, so none is cut off by the edge. overflow: clip keeps the dots inside a Box with large rounded corners.
Color
By default the dots use the theme color of the app. Set color to "teal", "purple", "pink", "yellow", "red" or "green" to use another color, for example when the service has a red or green identity that isn't a Bifrost theme. In light mode the dots are a lighter, grayer version of the color, in every color.
<TwinkleBackground color="green" />Front page header
On the front page of a Platform Manager module, use this background together with FrontpageHeader, and put a Backdrop behind its text so it stays readable on the dots.
<div className="page">
<TwinkleBackground />
<FrontpageHeader
title={<Backdrop>Platform Manager</Backdrop>}
subtitle={<Backdrop>An operational control plane ...</Backdrop>}
/>
</div>Good to know
- If a control sits closer to the screen edge than the page padding, give the page container
overflow-x: clip, so its backdrop doesn't cause sideways scrolling.
Accessibility
- When reduced motion is turned on, the dots stop and stay still. This applies at once, without a reload.
- There is no pause control. WCAG 2.2.2 (Pause, Stop, Hide) asks for one for animation that runs longer than 5 seconds, so an accessibility audit may flag it.
- In forced colors mode, such as Windows high contrast, no dots are drawn.