Dithering Globe Hero

Section

A split hero section with a slowly spinning, ordered-dither globe of the Earth.

dithering-globe-hero.tsx

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"

import { DitheringGlobe } from "./dithering-globe"

type DitheringGlobeHeroProps = React.ComponentProps<"section"> & {
  eyebrow?: string
  title?: string
  description?: string
  primaryAction?: { label: string; href: string }
  secondaryAction?: { label: string; href: string }
  colorBack?: string
  colorFront?: string
}

function DitheringGlobeHero({
  eyebrow = "Available in 190+ countries",
  title = "Built for every corner of the map",
  description = "A slowly turning, ordered-dither Earth rendered live on the GPU. Retro texture, real coastlines.",
  primaryAction = { label: "Start building", href: "#" },
  secondaryAction = { label: "Talk to sales", href: "#" },
  colorBack = "#000000",
  colorFront = "#38bdf8",
  className,
  style,
  ...props
}: DitheringGlobeHeroProps) {
  return (
    <section
      data-slot="dithering-globe-hero"
      className={cn(
        "dark relative isolate grid min-h-[640px] w-full overflow-hidden text-white md:grid-cols-2",
        className
      )}
      style={{ backgroundColor: colorBack, ...style }}
      {...props}
    >
      <div className="flex flex-col justify-center gap-6 px-6 py-24 md:px-12 lg:px-16">
        <span
          className="font-mono text-[11px] tracking-widest uppercase"
          style={{ color: colorFront }}
        >
          {eyebrow}
        </span>
        <h1 className="font-heading text-4xl leading-[1.05] tracking-tight text-balance sm:text-6xl">
          {title}
        </h1>
        <p className="max-w-md text-base text-pretty text-white/70 sm:text-lg">
          {description}
        </p>
        <div className="flex flex-wrap items-center gap-3">
          <a
            href={primaryAction.href}
            className={cn(
              buttonVariants({ size: "lg" }),
              "bg-white text-black hover:bg-white/80"
            )}
          >
            {primaryAction.label}
          </a>
          <a
            href={secondaryAction.href}
            className={buttonVariants({ size: "lg", variant: "outline" })}
          >
            {secondaryAction.label}
          </a>
        </div>
      </div>
      <div className="relative min-h-80">
        <DitheringGlobe
          aria-hidden
          className="absolute inset-0 size-full"
          colorBack={colorBack}
          colorFront={colorFront}
        />
      </div>
    </section>
  )
}

export { DitheringGlobeHero }

dithering-globe.tsx

"use client"

import * as React from "react"
import {
  getShaderColorFromString,
  ShaderMount,
  type ShaderComponentProps,
} from "@paper-design/shaders-react"

import { GLOBE_LAND_TEXTURE } from "./globe-texture"

const globeFragmentShader = `#version 300 es
precision mediump float;

uniform float u_time;
uniform vec2 u_resolution;
uniform float u_pixelRatio;

uniform sampler2D u_land;
uniform vec4 u_colorBack;
uniform vec4 u_colorFront;
uniform float u_pxSize;
uniform float u_scale;
uniform float u_tilt;
uniform float u_glow;

out vec4 fragColor;

const float PI = 3.14159265359;

const int bayer4x4[16] = int[16](
  0, 8, 2, 10,
  12, 4, 14, 6,
  3, 11, 1, 9,
  15, 7, 13, 5
);

float getBayerValue(vec2 cell) {
  ivec2 pos = ivec2(mod(cell, 4.));
  return float(bayer4x4[pos.y * 4 + pos.x]) / 16.;
}

void main() {
  // Snap to the dithering grid so every "pixel" is a solid block.
  float pxSize = u_pxSize * u_pixelRatio;
  vec2 cell = floor((gl_FragCoord.xy - .5 * u_resolution) / pxSize);
  vec2 cellCenter = (cell + .5) * pxSize;

  // Unit circle that fits the canvas, scaled by u_scale.
  vec2 p = cellCenter / (.5 * min(u_resolution.x, u_resolution.y) * u_scale);
  float r2 = dot(p, p);

  float shape = 0.;
  if (r2 < 1.) {
    // Texture lookups need more precision than mediump guarantees on mobile.
    highp vec3 normal = vec3(p, sqrt(1. - r2));

    // Tilt the globe towards the viewer, then spin it around its own axis.
    float c = cos(u_tilt);
    float s = sin(u_tilt);
    highp vec3 q = vec3(normal.x, c * normal.y - s * normal.z, s * normal.y + c * normal.z);
    highp float lon = atan(q.x, q.z) - .25 * u_time;
    highp float lat = asin(clamp(q.y, -1., 1.));
    highp vec2 uv = vec2(fract(lon / (2. * PI) + .5), .5 - lat / PI);

    float land = texture(u_land, uv).r;
    land = max(land, step(.985, uv.y)); // close the gap at the south pole

    vec3 light = normalize(vec3(-.5, .6, .75));
    float diffuse = clamp(dot(normal, light), 0., 1.);
    float rim = pow(1. - normal.z, 3.);

    shape = mix(.12, 1., land) * (.25 + .75 * diffuse) + .2 * rim;
  } else {
    // Soft atmosphere around the edge.
    shape = u_glow * exp(-(sqrt(r2) - 1.) * 18.);
  }

  // Same threshold as Paper's Dithering shader: zero intensity stays empty.
  float res = step(.5, shape + getBayerValue(cell) - .5);

  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
  float fgOpacity = u_colorFront.a;
  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
  float bgOpacity = u_colorBack.a;

  vec3 color = fgColor * res;
  float opacity = fgOpacity * res;
  color += bgColor * (1. - opacity);
  opacity += bgOpacity * (1. - opacity);

  fragColor = vec4(color, opacity);
}
`

type DitheringGlobeProps = Omit<ShaderComponentProps, "ref"> & {
  colorBack?: string
  colorFront?: string
  /** Size of a dithering pixel, in CSS pixels. */
  size?: number
  /** Globe diameter relative to the smaller side of the container. */
  scale?: number
  /** Axial tilt towards the viewer, in degrees. */
  tilt?: number
  /** Strength of the atmosphere glow around the globe, 0 to 1. */
  glow?: number
  speed?: number
}

function DitheringGlobe({
  colorBack = "#00000000",
  colorFront = "#38bdf8",
  size = 2,
  scale = 0.9,
  tilt = 20,
  glow = 0.4,
  speed = 1,
  ...props
}: DitheringGlobeProps) {
  const uniforms = React.useMemo(
    () => ({
      u_land: GLOBE_LAND_TEXTURE,
      u_colorBack: getShaderColorFromString(colorBack),
      u_colorFront: getShaderColorFromString(colorFront),
      u_pxSize: size,
      u_scale: scale,
      u_tilt: (tilt * Math.PI) / 180,
      u_glow: glow,
    }),
    [colorBack, colorFront, size, scale, tilt, glow]
  )

  return (
    <ShaderMount
      data-slot="dithering-globe"
      fragmentShader={globeFragmentShader}
      uniforms={uniforms}
      speed={speed}
      {...props}
    />
  )
}

export { DitheringGlobe }

globe-texture.ts

// Equirectangular land mask (1024×512, 1-bit PNG) rendered from Natural Earth
// 1:50m land polygons, which are in the public domain.
// White = land, black = water. North is up, longitude -180° is on the left.
const GLOBE_LAND_TEXTURE =
  "data:image/png;base64," +
  [
    "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",
    "A4fsM4eleAAAAABJRU5ErkJggg==",
  ].join("")

export { GLOBE_LAND_TEXTURE }

Installation

npx shadcn@latest add https://shaderscn.com/r/dithering-globe-hero.json

Usage

import { DitheringGlobeHero } from "@/components/dithering-globe-hero"

export default function Page() {
  return <DitheringGlobeHero colorFront="#38bdf8" />
}