PresetHaus
← All presets

Internet · Light

Uplink

A Swiss page in absolute white, where a single white 3D object crosses the giant typography and follows the scroll like a silent character all the way to the footer.

Palette

  • --bg#FDFDFD

    main background, almost pure white

  • --ink#111111

    titles, large numbers, logo

  • --ink-2#6B6B6B

    short paragraphs and captions

  • --line#DADADA

    thin rules under fields and above the plans

  • --accent#1C2A52

    navy blue of the 3D object's solar panels and of the highlighted plan's number

  • --shadow#ECECEC

    diffuse elliptical shadow under the floating object

  • --photo-earth#B5523A

    red earth of the rural photos (only in images, never in UI)

Typography

  • Display: neo grotesque, regular/medium weight (400–500), lowercase with a capital initial, strong negative tracking (-0.04em), line-height 0.9; hero titles at clamp(72px, 11vw, 168px), broken into two stacked words — suggestions: Inter Tight / General Sans (Fontshare)
  • Body: same grotesque at 13–15px, weight 400, medium gray, narrow blocks of 30–40 characters per line.
  • Support/labels: grotesque 11–12px in normal case for form labels, thin-underlined footer links and price microtext ("/mo" at 9px).
  • Treatments: giant plan numbers (clamp 64–120px) with a small superscript unit on the right; 01–04 numbering in enormous display for the steps; giant logo in the footer cropped by the bottom edge, with the 3D object perched on it.

Sections

  1. Nav — text logo with a period on the left, three-uneven-line menu icon on the right; nothing else. Height ~56px, no background.
  2. Hero — 2-line title on the left taking ~50% of the width; 2-line subtitle aligned right at the top; 3D object (white satellite with navy solar-panel wings) crossing the title horizontally, with an elliptical shadow beneath. Base of the hero: inline form with 4 columns (postcode field, property-type select with dropdown, plan select, action link with an arrow) over 1px rules.
  3. Manifesto — 2-line title on the left, short paragraph below; the 3D object, now smaller and tilted, moves to the right.
  4. Plans — short title on the left + note on the right; three columns separated by a top rule; each column with a giant number, superscript unit, description, small price and an underlined "subscribe" link; the middle plan has its number in navy blue and a tiny "most popular" label.
  5. Photo strip — full-bleed panoramic photo of farmland; three vertical portraits of rural residents overlapping the bottom edge, offset at different heights.
  6. How it works — 2-line title; four steps in a diagonal staircase (01 top-left → 04 bottom-right), each with a giant number, rule, title and microtext; white 3D satellite dish appears in the right corner.
  7. Coverage — 2-line title and short note on the right, followed by a full-bleed photo of a rural house; the hero's form reappears fixed at the base as a lookup bar.
  8. Support + Footer — 2-line title, phone and WhatsApp in large underlined text, small link columns on the right; giant logo cropped at the base with the 3D object perched on it; tiny legal line and "back to top".

Motion and interaction

  • Object that descends with the page: scroll (no GSAP) → a single full-screen position: fixed Three.js canvas; the object's position/rotation/scale is interpolated between "anchors" (empty DOM elements in each section) with damping lerp 0.08 per frame; in transitions it rotates ~20° on the Y axis and shrinks to ~45% in the manifesto.
  • Idle float: always → sine on Y ±6px and Z rotation ±1.5° on a ~4 s cycle; the elliptical shadow breathes in opacity 0.35–0.5.
  • Cursor parallax: mousemove → the object tilts up to ±4° on X/Y with damping 0.06.
  • Hero exit: scroll → title and subtitle rise and fade (opacity 1→0.2) while the object stays, creating the effect of it "staying behind" the typography.
  • Section reveal: IntersectionObserver → blocks rise 24px and go from opacity 0 to 1 in 700ms cubic-bezier(.2,.7,.2,1), staggered 80ms.
  • Form dropdown: click → white panel with a soft shadow opens 8px below, 12px items, select arrow rotates 180°.
  • Staircase of steps: each number enters 120ms after the previous one, reinforcing the diagonal.

Components

  • Inline field: 11px label on the left, gray placeholder value on the right, 1px #111 rule beneath, no box.
  • Minimalist select: same field with a thin chevron; floating white menu, 4px radius, shadow 0 8px 24px rgba(0,0,0,.08).
  • Action link: 12px weight 600 text + "→" arrow, 1px underline that grows from the left on hover.
  • Plan column: top rule, giant number + superscript unit, 12px description, price with a small "R$", underlined link.
  • Numbered step: 72–96px display number, rule, 14px title, 11px gray microtext.
  • Floating portrait: 3:4 vertical photo with no border or radius, overlapping the panoramic photo.
  • Footer logo: wordmark at ~30vw, cropped by the bottom edge.
Uplink · Internet · PresetHaus