BeNorth Sticker Hero
Full-viewport collage hero (BeNorth.Studio). A giant SVG wordmark loops as a pure-CSS marquee, sandwiched between two layers of scattered stickers. On every load the stickers are re-placed at random collision-free positions (large ones biased to center), then animated by a summed motion of lerped cursor parallax (165px x speed, front layer x1.25), scroll drift (-scrollY x speed), and a slow per-sticker sine idle float. Marquee slides up 112% on load and pauses on hover.
Preview
BeNorth.Studio
Source
"use client";
import BeNorthStickerHero from "./index.jsx";
import BeNorthReel from "@/content/galleries/benorth-reel/index.jsx";
import BeNorthTagline from "@/content/about-story/benorth-tagline/index.jsx";
import { benorthStickerHero } from "../demo-data.js";
import { benorthReel } from "@/content/galleries/demo-data.js";
import { benorthTagline } from "@/content/about-story/demo-data.js";
import styles from "./demo.module.css";
export default function BeNorthStickerHeroDemo() {
return (
<div className={styles.demo}>
<BeNorthStickerHero {...benorthStickerHero} />
<BeNorthReel {...benorthReel} id="benorth-reel" />
<BeNorthTagline {...benorthTagline} />
<div className={styles.outro} />
</div>
);
}









