Solar energy · Light

Floating Isle

A 2.5D hero diorama: a little house with solar panels floats on a clump of earth in the blue sky, between layers of clouds that follow the cursor, with a giant off-white wordmark at the base and live generation data in mono in the corners, all under film grain.

Palette

--ceu#2F5F92
blue of the top of the sky, where the HUD and nav sit (--osso at 5.8:1)
--ceu-baixo#B9C3CF
mist/clouds at the base, transition to the text
--osso#F4EFE6
wordmark, light button, main text over the sky
--marinho#12233F
circle of the button's arrow, button text, paragraph and invitation over the mist
--terra#76523D
earth-clump tone (reference for warm shadows)

Typography

Display: neo-grotesque of medium weight (500), mixed case, tracking -0.045em, with a superscript asterisk beside it — clamp(5rem, 15vw, 14rem), line-height 0.85 — suggestions: Inter Display 500 / Geist 500
Body: same grotesque 400, 15–17px, line-height 1.3, 3-line block
Support/labels: monospace 10–11px in mixed case for the HUD (time · city · coordinate; "generating now x kW"; "today: a of b kWh") and the invitation "[ scroll to see the system ]" — suggestions: JetBrains Mono / IBM Plex Mono
Treatments: large asterisk as a stylized "sun" at the end of the wordmark; HUD numbers with tabular-nums and live updating; text over a photo with a very soft shadow.

Sections

Nav — translucent blue capsule centered at the top with 4 links; mono HUD in the top corners (left: time, city, latitude + current output; right: day's energy vs. target).
2.5D hero — gradient sky with clouds at several depths; the diorama (house, tree, water tank, panels) centered in the upper third, floating; front clouds cover the base of the clump; giant wordmark in the bottom-left corner; on the right, a 3-line paragraph + light pill button with a navy circle and arrow; centered mono invitation at the base.
Next section (hook) — the invitation announces a "the system" section; the hero hands off the transition (clouds rise and cover the screen).

Motion and interaction

Intro: load → the camera "descends" from the sky: the diorama starts smaller and higher, clouds part, the wordmark rises from below (≈1.6s); the HUD types in.
Layered parallax: cursor → each layer (sky, distant clouds, diorama, near clouds) shifts in proportion to depth (2–40px) with damping; GSAP quickTo.
Floating: continuous → the diorama moves up and down 6px over 5s (sine) and tilts ±0.6°; clouds drift horizontally.
Panel glint: continuous/cursor → a specular reflection sweeps across the solar panels.
Bird/particles: a small element crosses the sky from time to time.
Live HUD: every second → output oscillates slightly and the day's total climbs.
Scroll exit: scroll scrub → diorama rises and shrinks, front clouds rise and cover the screen, wordmark descends.
Grain: animated noise overlay (opacity ~6%).

Components

Nav capsule: 36px height, padding 0 24px, 12px radius, --nav background, blur 14px, 1px --linha border, 12px --osso links.
HUD block: 2 mono lines at 10px, tabular-nums.
Pill button: 40px, --osso background, 13px --marinho text, left padding 20px, 30px navy circle on the right with a white arrow.
Wordmark: off-white with a 0.35em superscript asterisk.
Cloud layer: PNG with alpha, widths 40–120vw, variable blur according to depth.
Grain overlay: noise canvas/SVG, mix-blend overlay.