{"id":"1f98452e-d721-46be-b2e1-6bbbe80af4b5","slug":"cliphouse-app","kind":"mcp","name":"cliphouse-app","summary":"Website and MCP server for cliphou.se. You ship it. Cliphouse shows it off: release videos that find the selling points, pick the angle, and write the copy.","owner":"sunmer","repoUrl":"https://github.com/sunmer/cliphouse-app","license":"MIT-0","licenseTier":"permissive","trust":"community","stars":0,"match":null,"fewStars":true,"format":"mcp","createdAt":"2026-10-07T11:04:42.000Z","addedAt":"2026-10-17T22:18:54.931Z","logoUrl":"https://avatars.githubusercontent.com/u/1541904?u=6dd82f8e42b9be0e253bc8eae3274fab90f3e334&v=4","linkOnly":false,"collection":null,"skillPath":null,"categories":["cloud-infra"],"tags":[],"runtime":"remote","local":false,"cloudCapable":false,"cloudCapability":"unknown","cloudReadyOnPlatform":false,"needsApiKey":false,"reviewed":false,"syncedAt":"2026-10-17T22:18:54.927Z","sample":false,"url":"https://conduits.dev/tools/cliphouse-app","language":"TypeScript","transports":["http"],"install":{"remoteUrl":"https://cliphou.se/mcp"},"requirements":{"env":[],"upstreamMayCharge":false},"tools":null,"readme":"# cliphou.se\n\ncliphou.se is a gallery of AI-generated Remotion and HyperFrames videos. Users can find videos with faceted filters, edit text and colors inline, and keep private starred collections through Google sign-in. Each template is locked to one engine, while the editor, agent handoff, sharing, and export flows use the same contract.\n\nThe production site is https://cliphou.se/, and Firebase also serves it at https://cliphouse-app.web.app/. Pushes to `main` deploy through keyless GitHub Actions. This repository was renamed from `sunmer/voodoo`, and the old GitHub Pages address is retired.\n\nSee [deployment.md](docs/deployment.md) for configuration and the Loopia cutover checklist.\nSee [sharing.md](docs/sharing.md) for saved video links, rendering, and the pending paid-service activation.\nSee [agents.md](docs/agents.md) for agent specs, handoff links, source packages, and template versions.\n\n## Use cliphou.se from your agent\n\n[![Demo: a coding agent suggests release video templates, the user picks one, and the agent fills it from the repo](public/agents/poster-16x9-a1.jpg)](https://cliphou.se/agents/)\n\n**You ship it. Cliphouse shows it off.** Your coding agent turns every release into a video for your socials. It finds the selling points, picks the angle, writes the copy, and uses your brand colors and logo.\n\n- Coding agents (Codex, Claude Code): `npx skills add sunmer/cliphouse`\n- Chat apps (Claude, ChatGPT, Cursor): connect the MCP server at `https://cliphou.se/mcp`\n\nThe skill, the MCP install links, and the demo are in [sunmer/cliphouse](https://github.com/sunmer/cliphouse). The install page is https://cliphou.se/agents/.\n\n## Run\n\n```bash\nnpm install\nnpm run dev                 # http://localhost:5180/voodoo/\nnpm run studio              # Remotion Studio\nnode scripts/previews.mjs   # rebuild gallery posters and MP4 loops in public/previews\nnpm run previews:hyperframes # rebuild HyperFrames posters and loops\n```\n\n## Accounts And Analytics\n\nUse `.env.example` to configure the public Firebase web settings and GA4 measurement ID. Never put a service-account key or OAuth client secret in a `VITE_` variable. Missing configuration leaves browsing and editing available but does not pretend to save bookmarks.\n\nStars use `users/{uid}/bookmarks/{variantId}` in Firestore. Rules restrict all access to the account owner and validate the payload. Sign-out clears the visible collection. Existing `voodoo:` local-storage keys are intentionally retained so the rebrand does not discard edits on the same origin. Local edits cannot automatically transfer from the GitHub Pages origin to cliphou.se.\n\nAnalytics loads automatically when configured, without a consent banner. The site sends explicit hash-route page views and a small set of actions, without account IDs or editable text. Disable automatic enhanced measurement on the GA4 web stream to avoid duplicate page views or automatic collection. Review consent obligations before public launch; this configuration is not a compliance guarantee.\n\nGoogle pop-ups can be blocked inside social apps. The error state permits retrying in a regular browser. Native iPhone sign-in still needs a real-device acceptance test before launch.\n\n## Taxonomy\n\nThe catalog uses three levels:\n\n- **Template:** code in `src/videos/<id>/`. It sets the scenes, motion, and timing. Its technical facts, such as size, fps, duration, scenes, and motion, are in `meta.ts`.\n- **Variant:** an entry in `manifest.json`. It is a template plus preset text and theme values, plus curated facets: purpose, style, energy, and keywords. Users browse variants.\n- **Remix:** a user's edit of a variant. Save keeps a private account draft. Publishing saves an immutable composition and JPEG thumbnail behind a share link; the website animates the saved composition without a rendered MP4.\n\nFacets come from different sources:\n\n| Facet | Source |\n|---|---|\n| Format, duration, placement | Template size and fps |\n| Scenes, motion | Template `meta.ts`. The timeline reads the same data. |\n| Tone (dark or light) | Brightness of the theme background |\n| Purpose, style, energy | Curated in `manifest.json`, using only `vocab` terms |\n\n## Shared Roles\n\nAll templates use the text roles in `src/videos/vocab.ts`: `brand`, `headline`, `subhead`, `point1` to `point3`, and `cta`. All templates also use the same five theme roles. Because of this, the **brand kit** can apply one set of values to every video. Each card then shows one static Remotion frame with the user's text, but only while the card is on screen.\n\nContent roles hold text that belongs to one video, so the brand kit never fills them. `quote` (140 characters) and `author` (40 characters) are content roles for testimonials. Countdown digits come from the timeline, not from a text role. Image logo upload is not part of the contract yet; Wordmark animates the brand name as text.\n\n## Add A Template\n\nHyperFrames templates live in `src/hyperframes/<id>/index.html`. Use the shared `__BASE_CSS__`, `__BASE_JS__`, and `__ASSET_BASE__` placeholders, mark editable text with `data-text-role` and `data-var-text`, and register the template ID in `src/videos/engine.ts`. Their source packages are native HyperFrames projects with `variables.json`; run `npx hyperframes check` on an extracted package before publishing.\n\n1. Generate a composition that reads all text from `props.texts` with shared roles, and all color from `props.theme`.\n2. Add `meta.ts` with its scenes. Each scene has `from`, `duration`, `focus`, and `roles`. Map the components to scenes in the same order with `SceneTrack` from `src/videos/shared/scenes.tsx`. Each role must be visible at its scene's midpoint because inline tests seek there.\n3. Add the schema with `textsSchema([...roles])` and `themeSchema`, and register the template in `src/videos/registry.ts` and `src/videos/meta.ts`.\n4. Add the template and one visible variant to `manifest.json`. Keep retired variants with `\"hidden\": true` so existing links still open. Then run `node scripts/previews.mjs`.\n5. Mark each editable text group with `data-text-role=\"headline\"` (or the matching shared role). Use `display: contents` on additional wrappers to preserve the composition layout. Tag the copy itself, not decorative labels or whole scenes.\n6. Add the schema to `src/videos/schemas.ts`. Run `npm run sources` to publish its source package and version. Run it again after any template or shared helper change.\n\n## Editor\n\n- Mobile uses a screen-filling stage with overlay controls. Landscape compositions fill the phone when it rotates to landscape. The expand button requests native fullscreen and landscape orientation where supported; otherwise it uses the browser viewport. Desktop keeps a contained preview.\n- Click or tap visible text to pause and edit that role in place. Confirm to save one undo step, or cancel. Scene buttons expose later text without a separate text panel.\n- Theme controls sit below the video. Video details show the original creative brief with a copy action. Related videos and taxonomy are not part of the editor.\n- Saved props are validated before loading. Invalid text cannot be committed. Changes remain available after reloading.\n- Share replaces the JSON download. Publishing requires Google sign-in; recipients can view without it. Live publishing stays unavailable until the rendering service is configured.\n\n## Notes\n\n- Preset gallery cards autoplay muted MP4s when at least 35% visible. Scrolling away or hiding the page unloads them. Reduced-motion settings keep the poster, as does a rejected autoplay request.\n- iPhone/iPad live compositions skip costly grain, blur, and selected 3D layers. Exported videos retain the full effects. Browser emulation cannot prove stability on every physical iPhone.\n- The gallery shows one preset per template. Retired color presets stay hidden but remain valid for bookmarks, saved drafts, and share links. Flex measures glyph bounds to fit variable-width text.\n\n## Verify\n\n```bash\nnpm run build\nnpm test\nnpm run test:agent\nnpm run test:source-render -- stack\nnpm run test:rules          # requires Java 21 on PATH\nnode scripts/smoke.cjs\nnode scripts/smoke-ios.cjs\nnode scripts/smoke-media.cjs\nnode scripts/smoke-media.cjs --ios\nnode scripts/smoke-inline.cjs\nnode scripts/smoke-inline.cjs --ios\nnode scripts/smoke-editor-layout.cjs\nnode scripts/smoke-editor-layout.cjs --ios\nnode scripts/smoke-editor-layout.cjs --mobile\n```\n\nAdditional integration checks:\n\n```bash\n# Run a separate Vite server with VITE_GA_MEASUREMENT_ID=G-TEST123.\nURL=http://127.0.0.1:5181/voodoo/ node scripts/smoke-analytics.cjs\n\n# Start local emulators with project demo-cliphouse, then start Vite with\n# VITE_FIREBASE_EMULATORS=true and demo Firebase settings.\nfirebase emulators:start --project demo-cliphouse --only auth,firestore\nURL=http://127.0.0.1:5182/voodoo/ node scripts/smoke-sync.cjs\n```\n\nThe emulator switch is ignored in production builds. Security tests cover unauthenticated access, cross-account access, payload validation, and owner writes.\n\nRun the browser checks against the dev server, or set `URL` to the deployed site. Media checks cover viewport autoplay, background cleanup, blocked autoplay, reduced motion, complete editor loops, and Flex text fitting. Screenshots are viewport-sized and written under `/tmp/voodoo-*`.\n\nInline checks edit every role in every template and verify undo, redo, and persistence. Layout checks cover mobile rotation, the fullscreen fallback, orientation requests, duplicate text values, and validation. The synthetic keyboard viewport test runs in mobile Chromium because overriding that native property crashes this Mac's WebKit test runner; physical-device keyboard behavior still needs manual confirmation.\n\nDesign reference: [Adobe's 2026 design trends](https://www.adobe.com/express/learn/blog/design-trends-2026), including tactile collage and playful typography. Playback reference: [WebKit's inline autoplay policies](https://webkit.org/blog/6784/new-video-policies-for-ios/).\n\n## Rendering\n\n- Remotion's downloaded headless Chrome hangs on this machine. `remotion.config.ts` and the preview script use Playwright's cached headless shell instead. To use another browser, set `REMOTION_BROWSER`.\n- Remotion needs a company license above a small team size. See remotion.dev/license.\n"}