50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T256b,"use client"; import { Timegroup } from "@editframe/react"; import type { CSSProperties } from "react"; const FONT_FAMILY = "var(--font-geist-sans), -apple-system, BlinkMacSystemFont, sans-serif"; const GitHubMark = () => ( ); const VercelMark = () => ( ); const StripeMark = () => ( ); const SlackMark = () => ( ); const LinearMark = () => ( ); const FigmaMark = () => ( ); const NotionMark = () => ( ); const DiscordMark = () => ( ); interface SatelliteBrand { Logo: React.ComponentType; bg: string; } const SATELLITE_BRANDS: SatelliteBrand[] = [ { Logo: GitHubMark, bg: "#1f1f23" }, { Logo: VercelMark, bg: "#0a0a0a" }, { Logo: StripeMark, bg: "#635bff" }, { Logo: SlackMark, bg: "#1a1d21" }, { Logo: LinearMark, bg: "#5e6ad2" }, { Logo: FigmaMark, bg: "#1e1e1e" }, { Logo: NotionMark, bg: "#1a1a1a" }, { Logo: DiscordMark, bg: "#5865f2" }, ]; export interface EcosystemConstellationProps { satelliteCount?: number; centerLabel?: string; accentColor?: string; speed?: number; fps?: number; durationInFrames?: number; width?: number; height?: number; className?: string; } export const EcosystemConstellation = ({ satelliteCount = 6, centerLabel = "V", accentColor = "#a855f7", speed = 1, fps = 30, durationInFrames = 240, width = 1280, height = 720, className, }: EcosystemConstellationProps) => { const safeSpeed = Math.max(0.01, speed); const durationMs = ((durationInFrames / fps) * 1000) / safeSpeed; const frameMs = 1000 / fps; const count = Math.max( 3, Math.min(SATELLITE_BRANDS.length, Math.floor(satelliteCount)) ); const cx = width / 2; const cy = height / 2; const baseRadiusX = 230; const baseRadiusY = 180; // Generate positions for satellites in an elliptical orbit const satellites = Array.from({ length: count }).map((_, i) => { const angle = (i / count) * Math.PI * 2; const orbitOffset = i * 22; const rX = baseRadiusX + orbitOffset; const rY = baseRadiusY + orbitOffset * 0.7; const x = cx + Math.cos(angle) * rX; const y = cy + Math.sin(angle) * rY; const brand = SATELLITE_BRANDS[i % SATELLITE_BRANDS.length]; return { Logo: brand.Logo, color: brand.bg, index: i, x, y, }; }); const containerStyle: CSSProperties = { background: "radial-gradient(ellipse at center, #14101e 0%, #05030a 75%)", fontFamily: FONT_FAMILY, height, overflow: "hidden", position: "relative", width, }; return ( <> {/* Center logo */}

{centerLabel}

{/* Satellites */} {satellites.map((s, i) => { const { Logo } = s; return (

); })} ); }; 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","remotion",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/remotion","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"remotion"}]]}]}]]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://framecn.vercel.app/r/ecosystem-constellation.json","proxyUrl":"https://shadcnregistry.com/r/framecn/ecosystem-constellation","itemId":"@framecn/ecosystem-constellation"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/bases/editframe/components/ecosystem-constellation/index.tsx","content":"$53","type":"registry:component","target":"components/framecn/ecosystem-constellation.tsx"}]}]]}],"$L54"]}]

Ecosystem Constellation

Installation

Files

components

Styles