DESCRIPTION
Webflow's Community Pages feature two custom interactive components: a Three.js globe and a CSS-perspective image carousel. Built with N4 Studio for Webflow's community hub, which serves as the central space for 300K+ designers, developers, and agency owners. I was brought in as a creative dev to build both components as reusable, CMS-driven Webflow elements.
MY ROLE
Built a 3D globe and the hero image animation. The Three.js globe uses real GeoJSON data to place dots accurately on land masses, with CMS-driven community locations plotted via lat/lng coordinates.
The hero component creates a 3D orbiting effect using only CSS perspective *no WebGL* co-built with Moe Yarroum, who created the initial concept and design. I took his base and made it performant, responsive across breakpoints, and packaged it as a Webflow component with slots. Designers can drop in as many portrait cards as they want and configure colors, names, and tag placement without code. A randomize attribute controls how cards are selected.
CONCLUSION
Shipped both components for Webflow's community relaunch. The globe navigation buttons were reimagined during implementation, but the core geo-accurate globe with CMS integration and auto-rotation remains live. Built with N4 Studio - check out their work at n4.studio. Thanks to Moe Yarroum for the hero concept and design.
MeTHOD
The Three.js globe fetches GeoJSON country boundaries and runs point-in-polygon tests to scatter dots only on land. CMS items with lat/lng attributes get plotted as highlighted points. OrbitControls handle grab interaction, with auto-rotation that pauses smoothly on user input. Performance considerations include IntersectionObserver-based lazy loading and reduced-motion support.
The hero image globe uses CSS perspective and transform-style: preserve-3d to create depth. Cards are distributed using golden ratio spacing, with per-breakpoint Y-offset tweaks for visual balance. Depth-based blur and opacity fade simulate distance. Drag interaction on desktop, scroll-driven parallax, and velocity-based momentum rounding it out. The whole thing reads from a hidden CMS list, clones the cards into 3D space, and respects data attributes for configuration.
View more
Webflow
