Sunny Background
A daylight sky you drop behind hero or section content: a two-stop sky gradient with a haze wash, a sun disc (corona → glow → overexposed core → slowly rotating conic rays → four lens flares), a golden-hour horizon band and a depth vignette.
Preview
Rendered from the story the storybook (a11y) CI gate runs axe against — the preview can't show something that hasn't been verified.
Install
Two equivalent paths — the URL works in any shadcn-CLI setup; the alias works once you've registered @interlace in your components.json.
npx shadcn@latest add https://ds.interlace.tools/r/sunny-background.jsonnpx shadcn@latest add @interlace/sunny-backgroundHistory
This component is at v1.1.0, first shipped in @interlace/ui 1.0.0. The version is stamped as a banner into the file the install writes, so the copy in your tree says which one you have — compare it with the number above before deciding whether to re-run the install.
No release note names this component yet. It shipped with the release above and has not changed since — see the full changelog for what moved elsewhere in the DS.
Import
Single named export.
import { SunnyBackground } from '@/components/ui/aceternity/sunny-background';Anatomy
Extracted from the primitive's JSDoc header. The source is the only documentation that can't drift.
SunnyBackground (div — data-slot="sunny-background")
├─ style (SUNNY_CSS — geometry + gradients)
├─ div[data-slot=sunny-sky] / sunny-haze
├─ div[data-slot=sunny-disc] (positioned by `corner`)
│ ├─ sunny-corona-outer / -middle / -glow / -core
│ ├─ sunny-rays (data-animated="true" | "false")
│ └─ sunny-flare ×4 (h, v, diag-1, diag-2)
└─ div[data-slot=sunny-horizon] / sunny-vignette
The whole effect is plain CSS — no canvas, no animation library — so it
costs one composited layer and the markup renders identically on the server.API reference
Parsed from the type declarations in the source — the same file the install writes into your tree, so this table can't drift from the component you get.
SunnyBackgroundProps
| Prop | Type | Description |
|---|---|---|
| size | string | Stable selector for E2E tests. Consumer-provided — there is intentionally no runtime default so an omission surfaces in review rather than masking a missing hook. / "data-testid"?: string; /** Diameter of the sun disc + corona system, as a CSS length. Everything (corona, glow, core, rays, flares) scales relative to this single value, so one prop resizes the whole sun without layout drift. @default "20rem" |
| corner | SunCorner | Where the sun is anchored within the surface. @default "top-right" |
| animated | boolean | Rotate the conic light rays around the sun. Disabled automatically when the user prefers reduced motion (the static layers keep rendering — only the rotation stops). Boolean, default-false-friendly but on by default here because the rays are the signature of the effect. @default true |
| raysDurationSeconds | number | Seconds for one full rotation of the light rays. Higher is calmer. @default 120 |
| coreColor | string | Overexposed core color — the brightest point of the sun. Exposed as a prop (rather than a hard-coded literal) so the surface can be retinted per brand or per theme. Accepts any CSS color, including a `var(--token)`. @default "oklch(1 0 0)" |
| glowColor | string | Warm halo color radiating out from the core through the corona. @default "oklch(0.95 0.06 85)" |
| skyTopColor | string | Sky color at the zenith (top of the surface). @default "oklch(0.7 0.13 240)" |
| skyBottomColor | string | Sky color at the horizon (bottom of the surface) — the golden-hour band. @default "oklch(0.93 0.05 85)" |
Accessibility
Every story for this component is rendered headlessly and checked with axe-core (wcag2aa, wcag22aa, best-practice, ACT) on every PR. That gate has no continue-on-error, so what ships has zero known violations.
What follows is what static analysis can see. Axe cannot press a key and never sees an overlay open, so the operable-without-a-mouse claim lives in Behavior instead, where the keyboard path is replayed step by step.
- Focus + keyboard behaviour
- Native element semantics — no interaction layer to get wrong.
- Focus ring (WCAG 2.2 SC 2.4.13)
- Not focusable — no focus indicator required.
- Reduced motion
- Animation is gated on prefers-reduced-motion.
- ARIA in the source
aria-hidden
Examples
3 more states from the same story file.
Dependencies
- Base UI primitive
- Native / no Base UI dependency
- Lucide icons
- none
- NPM dependencies
- none
- Registry dependencies
Source
The full implementation — components/ui/aceternity/sunny-background.tsx once installed.
"use client";
import { ComponentPropsWithoutRef, useId, useMemo } from "react";
// @interlace/sunny-background v1.1.0 — Interlace design system.
// Docs, props and live preview: https://ds.interlace.tools/c/sunny-background
// What changed since: https://ds.interlace.tools/c/sunny-background#history
// Generated banner — keep it, the upgrade diff reads this version.
/**
* @interlace/ui — SunnyBackground
*
* A daylight sky you drop behind hero or section content: a two-stop sky
* gradient with a haze wash, a sun disc (corona → glow → overexposed core →
* slowly rotating conic rays → four lens flares), a golden-hour horizon band
* and a depth vignette.
*
* Decorative only — `aria-hidden`, `pointer-events-none`, `absolute inset-0`.
*
* ## Provenance
…427 more lines…Registry JSON
The raw registry record — what the shadcn CLI fetches.