feat: add clipped video tab component

[vij-sameerb5]

Description

Adds a cinematic clipped video tab component with responsive full-width layout, floating content cards, and immersive media presentation.

Changes

• Added clipped-video-tab component
• Added demo preview component
• Added component documentation page
• Registered component and example in Magic UI registry
• Added responsive full-width media support

Motivation

Provide a modern cinematic UI section for hero layouts, feature showcases, and immersive landing page experiences.

Breaking Changes

None

Screenshots

Device / Browser / Viewport:
MacBook Pro / Chrome / 1512×982

| Before | After |

| --- | --- |
| N/A | Added cinematic clipped video tab component |

[vercel]

@vij-sameerb5 is attempting to deploy a commit to the product-studio Team on Vercel.

A member of the Team first needs to authorize it.

[Yeom-JinHo]

Thanks for the contribution! Closing this for now — it would need substantial rework to meet the library bar:

1. Sidebar not registered. apps/www/config/docs.ts is missing an entry for clipped-video-tab, so the doc page is unreachable from the nav.
2. Dependency convention break. The repo standard is "motion", but this uses "framer-motion". It also adds framer-motion to the root package.json instead of apps/www/package.json (which already has motion).
3. Scope creep. Changes to tweet-card.tsx, public/r/tweet-card.json, and the tweet-card section of llms-full.txt are unrelated to this component — please split them into a separate PR.
4. No dark mode. Hardcoded bg-white, text-[#131313], #266347, etc. Should use design tokens (bg-background, text-foreground, …).
5. No props API. items is a module-level constant — users can't customize anything without forking the component.
6. Hot-linked media. All four videos are served from a personal Cloudinary account; if it goes away, every consumer's demo breaks.
7. <AnimatePresence> around <motion.video> unmounts/remounts the video on every tab switch — heavy re-download and a black flash. Cross-fade with opacity on persistent <video> elements instead.
8. Content mismatches. The "Audio Transcription" tab has a JWT-auth goal, and the footer hardcodes 2/5 tasks complete / Est. 45s remaining across all tabs.

Happy to re-review once these are addressed in a fresh PR.

[vij-sameerb5]

thanks to valuable insights i will be back with updating these.