feat: added 2 hero components plane-hero and globe-hero

[vij-sameerb5]

Component Name

plane-hero and globe-hero — two hero sections built on a dotted WebGL globe.

Description

plane-hero — a centred headline over a globe made of ~16k dots sampled off a world map. Ten cities carry anchored labels and six great-circle arcs redraw themselves on a staggered 7s loop. Each arc can carry a 3D plane at its peak, yawed to the real geographic bearing of its own flight line so it always points where it's going.

globe-hero — a three-line headline whose middle line swaps every two seconds, each character its own spring so the outgoing word slides up while the incoming one rises from below. The globe beside it carries a spinning tetrahedron at every edge region and a request counter drifting over every arc. Includes a slim navbar.

Both place their chips with CSS anchor positioning rather than measured coordinates — cobe publishes a --cobe-<id> anchor and a --cobe-visible-<id> number per point, so a chip tracks a spot on a rotating sphere and fades as it turns away, in CSS alone.

Preview

• public/previews/hero-sections/plane-hero/preview.mov — 0.68 MB, 1280×776 @ 30fps
• public/previews/hero-sections/globe-hero/preview.mov — 0.35 MB, 1280×776 @ 30fps

Compressed from 117.59 MB of raw 60fps capture, SSIM 0.991 and 0.992 against a CRF-12 reference.

Dependencies Added

None installed. plane-hero ships dependencies: []; globe-hero declares ["motion"], which the project already has and three other components already use.

cobe is vendored, not installed. It's MIT and a single 12.9 KB file, so both components carry it at ui/cobe.ts with the copyright notice restored — the dist bundle ships without one, and MIT requires it. Nothing to npm install, and the rendering is identical because it is cobe. @google/model-viewer loads from jsDelivr at runtime only when a plane model is configured.

Notes

A registry bug this uncovered. scripts/build-registry.ts collects only .tsx, .ts and .json and reads them as UTF-8. The vendored bundle was originally ui/cobe.js, which both demos import — it would have been silently dropped from the published registry, so anyone running npx shadcn add would have received a broken import. Renamed to ui/cobe.ts in both.

The same filter means plane-hero/ui/plane.glb (6.1 MB, binary) cannot ship through the registry either — a UTF-8 read would corrupt it. The model is kept in the component for source control, but PLANE_MODEL defaults to "", which is a complete component: every arc renders its text route chip and the model-viewer script never loads. Three ways to enable the planes, and the choice is open:

• host the .glb and point the constant at it — works everywhere, no tooling change
• teach build-registry.ts about binary assets (base64, or a public/ install target)
• leave it as text chips, in which case the Sketchfab credit comes out of the meta

Credits. Plane model: chroma3d on Sketchfab — https://sketchfab.com/vendol21. plane-hero adapted from the GlobalCare.ai hero; globe-hero from CohortData.com.

Both own their layout and are embed-safe: no position: fixed, no window.innerWidth/innerHeight, no document.body, every class and keyframe prefixed (ph- / gh-).

Browser support: the anchored chips rely on CSS anchor positioning, which is Chrome/Edge only today. The globes and arcs render everywhere; in Firefox and Safari the chips don't track their points. That's inherited from both references.

Checklist

• Added meta.ts
• Added demo.tsx
• Added preview (public/previews/{category}/{slug}/preview.mov)
• Ran npm run build:registry
• Ran npm run lint
• Ran npm run test
• Responsive (mobile + desktop)
• No console.log
• No hardcoded secrets/API keys
• No unnecessary dependencies
• No unnecessary hardcoded colors/assets

[netlify]

✅ Deploy Preview for zepaui ready!

Name	Link
🔨 Latest commit	818be72
🔍 Latest deploy log	https://app.netlify.com/projects/zepaui/deploys/6ab2b6e5e2e5bc0008bf0dfc
😎 Deploy Preview	https://deploy-preview-54--zepaui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.