Orbit — Animated Team Page Template

A zero-dependency, single-file-to-edit team page with an interactive orbit constellation, vibrating connection lines, and travelling glow particles. Clone it, fill in your details, ship it.

---

What is this?

A single-page team/about section with two parts:

1. Hero — Interactive constellation
Your team members orbit around your company logo. Users can drag any member circle; the connecting line stretches and vibrates like a guitar string when released. Glowing particles travel from the centre to each member in sequence. Clicking a member circle scrolls down to their profile card.

2. Profile section
Cards for each team member showing their photo placeholder, role, bio, and skills. Followed by a contact section with links to email and social media.

---

Screenshots / Demo

Hero — Interactive Orbit	Team Profiles

Contact Section

Live demo: coming soon — deploy to GitHub Pages and paste the URL here.

---

Quick Start

git clone https://github.com/your-username/orbit.git
cd orbit
python3 -m http.server 8080
# open http://localhost:8080

Requires a local server (not file://) because of ES modules.
Any static server works: npx serve ., npx http-server, or Live Server in VS Code.

---

How to Customise

Everything you need to edit lives in one file: js/config.js

orbit/
└── js/
    └── config.js   ← edit this file only

1. Company info

company: {
  name:      'Your Company',
  logoLine1: 'YOUR',
  logoLine2: 'LOGO',
  email:     'hello@yourcompany.com',
},

2. Links

links: {
  email:    'mailto:hello@yourcompany.com',
  linkedin: 'https://linkedin.com/company/...',
  github:   'https://github.com/...',
  twitter:  'https://twitter.com/...',
},

3. Team members

Add, remove, or edit members in the members array.
The orbit layout and profile cards update automatically.

members: [
  {
    initials: 'AY',                  // shown in the orbit circle
    name:     'Ahmet Yılmaz',
    role:     'CEO & Founder',
    bio:      'Short description...',
    skills:   ['Strategy', 'Leadership'],
  },
  // add as many members as you like
],

Adding a real photo

Target the generated card ID in your own CSS:

/* In css/profiles.css, or a new custom.css you include */
#profile-0 .pc-photo { background-image: url('../photos/name.jpg'); }

Or provide an <img> tag as the initials value — render.js injects it as-is inside .pc-photo.

Adding more than 6 members

1. Add the member object to the members array in js/config.js.
2. Add a colour variable in css/variables.css:

   --c6: #your-color;

3. Add matching CSS rules in css/hero.css (member node gradient) and css/profiles.css (card accent) following the existing .m5 / .pc5 pattern.

Changing animation speed

// js/members.js — exported constants
export const SEQ_SPEED       = 0.005; // lower = slower particle flow
export const PARTICLE_DURATION = 0.45;  // overlap between consecutive particles

---

File Structure

orbit/
├── index.html             # Semantic shell — no hardcoded content
│
├── css/
│   ├── variables.css      # All design tokens (colours, fonts) — edit here only
│   ├── hero.css           # Hero section, orbit circles, tooltip, animations
│   ├── profiles.css       # Profile card grid
│   ├── contact.css        # Contact / CTA section
│   └── responsive.css     # Tablet & mobile breakpoints
│
└── js/
    ├── config.js          # ★ YOUR CONTENT GOES HERE
    ├── data.js            # Computes orbit geometry from config (no DOM)
    ├── render.js          # Builds DOM from config data (runs once on load)
    ├── background.js      # Animated canvas background (stars, aurora, grid)
    ├── lightning.js       # SVG helpers: element factory, Bézier interpolation
    ├── members.js         # Physics state, drag events, tooltip, keyboard nav
    ├── animation.js       # Main requestAnimationFrame loop
    └── main.js            # Entry point — wires everything together

Data flow

config.js ──► data.js  (computes positions)
                │
                ▼
            render.js  (builds DOM)
                │
        ┌───────┴────────┐
        ▼                ▼
    members.js        animation.js
    (events)          (rAF loop)

---

Browser Support

Browser	Version	Notes
Chrome / Edge	90+	Full support
Firefox	90+	Full support
Safari	15+	100dvh available from 15.4; falls back to 100vh
Opera	76+	Full support
iOS Safari	15.4+	dvh unit; drag works with touch events
IE	—	Not supported (ES modules required)

The page uses ES modules (type="module"), backdrop-filter, and CSS custom properties. All three are Baseline 2023 or earlier.

---

Responsive Behaviour

Screen	Layout
> 1024px	Full 760px scene, 3-column profile grid
601–1024px	2-column profile grid
≤ 600px	Scene scales to viewport width, 1-column grid, drag hint hidden

Scene size and orbit radius are computed from window.innerWidth at load time (js/data.js). On a significant resize or orientation change the page reloads automatically.

---

Deploying

This is a static site — drop it anywhere:

• GitHub Pages → push to main, enable Pages in repo settings.
• Vercel / Netlify → connect repo, deploy the root directory.
• Any static host → upload all files as-is.

---

Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository and create a feature branch:

   git checkout -b feature/my-improvement

2. Make your changes. Keep edits focused — one feature or fix per PR.
3. Test locally with a static server (python3 -m http.server 8080) across at least Chrome and Firefox.
4. Open a pull request with a clear title and description of what changed and why.

Good first issues:

• Add a 7th member colour (--c6) with matching hero and profile CSS rules.
• Write a prefers-reduced-motion media query that pauses the rAF loop.
• Add a dark/light theme toggle using a CSS class on <body>.

Please be respectful and constructive — see the Code of Conduct (add one if you'd like).

---

License

MIT — free to use, modify, and distribute. Attribution appreciated but not required.