Watch
0
0
Fork
You've already forked hyperhive
0

swarm ui: the start page ends with the slug, its gradients animated

hyperhive / we are the wired between two shaded gradients that pulse in a
wave, still under reduced motion. It sits under 2em from the bottom edge,
clear of the setup assistant.
This commit is contained in:
iris 2026-11-01 13:31:34 +01:00 • committed by mara
commit 0e840bd34b
2 changed files with 94 additions and 11 deletions

View file

@ -21,3 +21,11 @@
0 0 0.4em color-mix(in srgb, var(--purple) 55%, transparent),
0 0 1.2em var(--bg);
}
/* The slug sits at the foot of the page, over the rain. It stays under 2em
* from the bottom edge, where the setup assistant starts (bottom-right,
* `SetupAssistant.css`), so the two never overlap, however narrow the window. */
.start-page .ui-slug {
position: absolute;
inset: auto 0 0;
margin: 0 0 0.4em;
}

View file

@ -1,7 +1,8 @@
// <StartPage> — `/`, the swarm's landing page: the swarm's name over the
// digital-rain backdrop, plus the setup assistant while the swarm has no
// `ruth`. The header's swarm name links here. The hive roster is a card on the agents page.
// `ruth`, and the slug at the foot. The header's swarm name links here. The hive roster is a card on the agents page.
import { MatrixRain } from "../shell/MatrixRain.js";
import { Slug } from "../ui/slug/Slug.js";
import { useSwarmName } from "../shell/useSwarmName.js";
import { SetupAssistant } from "./SetupAssistant.js";
import "./StartPage.css";
@ -17,6 +18,7 @@ export function StartPage() {
<MatrixRain />
<h1 class="start-page-name">{name}</h1>
<SetupAssistant />
<Slug />
</div>
);
}