Add Bill Cosby quote video generation flow

[Deekshithrathod]

Summary

• Add a Bill Cosby video workflow with generated quote data and rendering entrypoints
• Include a fetch script plus supporting app and TypeScript config updates
• Commit generated quote assets and ignore local script artifacts

Testing

• Not run (not requested)

Summary by CodeRabbit

• New Features

  • Added a new video application with animated quote visualization
  • Integrated dark and light theme support with interactive hover effects
  • Implemented video rendering with configurable display settings

• Chores

  • Added workspace configuration and build scripts
  • Included fallback quote data with dynamic fetch capability

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
quoto-web	Ready	Preview, Comment	Jun 18, 2026 12:03pm

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

A new apps/video workspace is introduced that creates a Remotion-based animated video. A Node.js fetch script retrieves Bill Cosby quotes from an external API and writes them to a generated JSON file. The quote data layer defines types, fallback data, and normalization utilities. A large React component file implements the animated scene with themed UI sub-components, cursor animation, and timed frame orchestration. A Remotion root wires the composition, with supporting package, TypeScript, and gitignore configuration.

Changes

Remotion Quote Video App

Layer / File(s)	Summary
Quote data types, utilities, and fetch script apps/video/src/billCosbyData.ts, apps/video/src/generatedBillCosbyQuotes.json, apps/video/scripts/fetch-bill-cosby.cjs	QuoteItem type, fallbackBillCosbyQuotes, getQuote, and normalizeBillCosbyQuotes are defined. A generated JSON file provides static quote data, and the fetch script fetches from an external API with timeout, filters, validates a minimum of 4 quotes, and writes the result to that JSON file (silently skipping on failure).
Animated Remotion scene component apps/video/src/QuotoBillCosby.tsx	Theme color palettes, animation helpers (progressFrom, clickPulse, themeAt), and all UI sub-components are implemented: PageShell, HeaderControls, AuthorTitle, QuoteBlock, AuthorButton, QuoteList, GetMoreQuotesButton, Cursor, Footer, and inline SVG icons. SceneOneQuoteExpansion orchestrates the full timed frame sequence using useCurrentFrame. QuotoBillCosby is exported, defaulting quotes to the fallback list.
Remotion wiring and project configuration apps/video/src/Root.tsx, apps/video/src/index.ts, apps/video/package.json, apps/video/tsconfig.json, apps/video/.gitignore	Root.tsx normalizes quote data into defaultProps, exports FPS/WIDTH/HEIGHT/DURATION_IN_FRAMES, and mounts the QuotoBillCosby <Composition>. index.ts registers the root via registerRoot. package.json wires prerender/prestudio data-fetch steps and the Remotion render/studio commands. TypeScript config and .gitignore (out/) round out the workspace setup.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐇 A rabbit hops through frames and scenes,
Quotes scroll in with animated gleams,
Dark and light themes switch with flair,
A cursor dances through the air.
out/ ignored, the JSON gleams—
All wired up for Remotion dreams! 🎬

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Add Bill Cosby quote video generation flow' accurately describes the main change: introducing a new video generation workflow for Bill Cosby quotes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch codex/write-seamless-motion-script

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 3c945335a9

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Keep padded quote blocks inside the video frame

In the 1920x1080 composition, PageShell caps the content column at 768px and the surrounding <main> hides overflow; this blockquote then sets width: "100%" while adding a 64px left padding and 8px border, so its border box becomes wider than the container. The quote text is laid out against the full 768px content width but the right side is clipped by the parent, which can cut off long quote lines in the rendered video. Use border-box sizing or reduce the content width so the padded block fits inside the column.

Useful? React with 👍 / 👎.

[chatgpt-codex-connector]

Deduplicate the fixed random quote

SceneOneQuoteExpansion shows quote indexes 1 through 10 in the expanded list and then uses index 11 as the post-click random quote, but this committed entry repeats the exact text already shown at index 6. With the current data, the final random action therefore reveals a quote the viewer has already seen instead of a new random result; deduplicate by text before writing/selecting these fixed slots or replace this item.

Useful? React with 👍 / 👎.

[chatgpt-codex-connector]

Require enough fetched quotes for every scripted slot

SceneOneQuoteExpansion consumes twelve quote slots (the first quote, ten list entries, and index 11 for the random reveal), but the prerender fetch accepts and writes any response with only four usable quotes. If the API returns 4–11 filtered quotes, npm run render overwrites the committed JSON with that short list and the remaining scripted slots fall back through getQuote, producing repeated fallback quotes instead of the fetched author flow; treat fewer than 12 as a fetch failure or adapt the scene to the returned count.

Useful? React with 👍 / 👎.