Connector hub

The agent's real Connectors settings: Gmail, Slack, Notion, GitHub and Calendar switch on one by one and show connected

Prompt for your agentpaste into Claude Code or Codex

Add the "Connector hub" video component (ChatGPT apps, light) from everestchris.com to this project.

1. Download https://ai-component-library-dun.vercel.app/projects/connector-hub.zip?v=bd54ce213c7e and unzip it into components/connector-hub/. Read the README.md and CLAUDE.md in it.
2. Render it: cd components/connector-hub && npx hyperframes@0.8.162 render . --variables '{"variant":"0","theme":"light"}' -o connector-hub.mp4
3. Give me the path of the MP4. The text, names and timings live in the CONFIG block at the top of the script in index.html; change nothing there unless I ask.

Code

One file. The project download adds the fonts, skins and motion kit it runs on.

index.htmlhtmlDownload

1<!doctype html>
2<html lang="en" data-composition-variables='[
3  {"id":"variant","type":"enum","label":"Variant","default":"0","options":[{"value":"0","label":"ChatGPT apps"},{"value":"1","label":"Claude connectors"},{"value":"2","label":"Muse"}]},
4  {"id":"theme","type":"enum","label":"Theme","default":"light","options":[{"value":"light","label":"Light"},{"value":"dark","label":"Dark"}]}
5]'>
6  <head>
7    <meta charset="UTF-8" />
8    <meta name="viewport" content="width=1920, height=1080" />
9    <link rel="stylesheet" href="assets/fonts/fonts.css" />
10    <link rel="stylesheet" href="assets/skins/chatgpt/skin.css" />
11    <link rel="stylesheet" href="assets/skins/claude/skin.css" />
12    <link rel="stylesheet" href="assets/skins/device/skin.css" />
13    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
14    <script src="assets/kit/motion/motion.js"></script>
15    <script src="assets/skins/chatgpt/icons.js"></script>
16    <script src="assets/skins/claude/icons.js"></script>
17    <script src="assets/skins/device/icons.js"></script>
18    <style>
19      * { margin: 0; padding: 0; box-sizing: border-box; }
20      html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: #f5f5f4; }
21      body[data-theme="dark"] { background: #0e0e0f; }
22      #root { position: relative; width: 100%; height: 100%; overflow: hidden; font-family: 'Inter', sans-serif; }
23 
24      /* ---------- stage (DESIGN.md tokens, flat) ---------- */
25      #stage { position: absolute; inset: 0; overflow: hidden; background: #f5f5f4; }
26      #stage[data-theme="dark"] { background: #0e0e0f; }
27      #scene { position: absolute; inset: 0; }
28      .place { position: absolute; left: 0; top: 0; }
29 
30      /* ---------- shared: a real switch (track, accent layer, thumb) ---------- */
31      .tg { position: relative; display: block; flex: none; }
32      .tg-on { position: absolute; inset: 0; border-radius: inherit; opacity: 0; }
33      .tg-th { position: absolute; border-radius: 50%; background: #fff; }
34      .stack { position: relative; display: block; }
35      .stack > .ln { position: absolute; left: 0; top: 0; white-space: nowrap; display: flex; align-items: center; }
36      .stack > .ln.b { opacity: 0; }
37 
38      /* =====================================================================
39         0 · ChatGPT — Settings › Apps (modal, chatgpt.com, account accent green)
40         ===================================================================== */
41      .v0 { --v0-bg: #ffffff; --v0-sel: #ececec; --v0-hov: #f4f4f4; --v0-off: #d7d7d7; --v0-tile-edge: rgba(0,0,0,.09);
42            --v0-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.06), 0 10px 22px -10px rgba(0,0,0,.12), 0 44px 90px -30px rgba(0,0,0,.30); }
43      .v0[data-theme="dark"] { --v0-bg: #212121; --v0-sel: #323232; --v0-hov: #2a2a2a; --v0-off: #474747; --v0-tile-edge: rgba(255,255,255,.0);
44            --v0-shadow: 0 0 0 1px rgba(255,255,255,.085), 0 2px 6px rgba(0,0,0,.5), 0 44px 96px -30px rgba(0,0,0,.95); }
45      .v0-zoom { position: relative; }
46      .v0-modal { position: absolute; inset: 0; display: flex; border-radius: 16px; background: var(--v0-bg); box-shadow: var(--v0-shadow); overflow: hidden; }
47      .v0-nav { width: 192px; flex: none; padding: 12px 8px 12px 10px; }
48      .v0-close { width: 32px; height: 32px; margin: 0 0 10px 2px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--cg-text-2); }

Open full file

Download project1 MB