Hosting · Dark

Uptime

A graphite 3D globe with lit amber points spins with your hand beneath a giant ghost word, and the page continues in wide grotesque, enormous prices in a list and human photos in dim light.

Palette

--bg#0F0E0C
main background, warm black
--ghost#1E1B18
giant word of the hero and footer, almost invisible
--globe#2A2724
globe oceans, shadows
--land#A39E97
stone-gray continents in relief
--text#F3F1EE
titles, prices, light buttons
--text-2#8A857F
descriptions, captions, inactive items
--accent#F2A54A
lit points of the regions, bullet of the active plan, status
--line#2B2825
dividers of the plan rows and the footer

Typography

Display: extended (wide) grotesque of weight 500–600, normal case, tracking -0.02em; ghost word at ~22vw; section titles clamp(28px, 2.8vw, 44px) on 2 lines with a period; prices and plan names at 56–72px — suggestions: Unbounded 500 / Clash Grotesk Semibold (Fontshare)
Body: neutral grotesque 400, 12–15px — suggestions: Inter / Switzer
Support/labels: 9–10px gray for plan specifications and captions under numbers
Treatments: giant ghost word behind the 3D; enormous statistic number with a blur that comes into focus; domain search field with the name in gray and the extension in white at 64px; prices with tiny symbol and periodicity

Sections

Nav — logo centered in wide grotesque, 4 small links on the left, 2 on the right.
Hero — giant ghost word at the top spanning the width, large globe bleeding off the bottom, 3-line phrase on the left, starting price on the right, pill button + arrow circle in the center of the globe.
Featured globe — the word vanishes, the globe centers and spins; then slides to the left with a 2-line title on the right about redundancy.
Domain — 2-line title on the left, small text on the right; enormous domain field spanning the width with a circular button; 4 extensions with price in columns below.
Plans — title, monthly/annual toggle; list of 4 wide rows: enormous name, small specification in the middle, enormous price on the right; active row in white with an amber bullet, the others in gray.
Migration — dark photo of a person in dim light on the left, title and text on the right, top strip with a summary of the chosen plan and a button.
Numbers — enormous statistic on the left and another on the right further down, with tiny captions.
Support — 2-line title, text and button on the left; close-up photo on the right.
CTA + footer — giant domain, price line, button; link columns; giant ghost word cropped at the bottom.

Motion and interaction

Draggable globe: cursor/touch → dragging spins the globe with inertia; without interaction, it spins slowly; Three.js/R3F with limited OrbitControls or custom rotation.
Lit points: continuous → amber sprites on the cities with a glow pulse; one of them "travels" and lands in the domain field.
Globe on scroll: scroll scrub → scale, position (center → left) and rotation follow progress; GSAP ScrollTrigger + Lenis.
Ghost word: scroll → rises and fades with slower parallax than the content.
Domain typing: scroll/load → the name is typed letter by letter, the extension already fixed in white.
Plan list: hover/scroll → active row lights up (gray → white) and the amber bullet slides between rows.
Number focus: scroll → statistic goes from blur(12px) and opacity .3 to sharp.

Components

Light pill button: #F3F1EE background, dark 11px text, 28px height, + separate 28px circle with an arrow.
Domain field: borderless input, 64px, 1px divider below, 36px white circular button on the right.
Extension column: 15px extension + 9px gray price.
Plan row: 3-column grid (name 64px / specification 10px / price 64px), 1px --line divider, 6px --accent bullet.
Period toggle: pill with 2 options, active one in white.
Statistic: 96–140px number weight 500 + 9px caption.
Status badge: 6px amber dot + 10px text.