mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-11 23:00:03 +00:00
Miguel Angel Simon Sierraandjbernard077
f252ec6d99
Adds three themed registry families contributed by @jbernard077: - mk-* minimal presentation (7 blocks, 3 components) - yt-* retro-broadcast creator (5 blocks, 4 components) - hw-* hand-drawn scribble (6 blocks, 5 components) Consolidates PRs #1933, #1992, #1993 and #1994, cuts 5 of the original 34 items, and fixes the defects that CI never got to report. Cut (5), each covered by something we already ship or trivial to inline: - yt-doc-lower-third — would be the 12th name/role lower third next to the 10 lt-* variants and lower-third-bild - mk-logo-sting — logo-outro exists, and yt-logo-intro is the richer version - mk-cta-button, mk-pill-callout, yt-avatar-pip — a styled button, a styled chip and a masked circle Fixes: - hw-path-text rendered as a solid black blob. #hw-pt-path is the textPath carrier and had no rule, so it inherited SVG's default black fill while only #hw-pt-guide set fill:none. - mk-line-graph value labels collided with their own dots and each other. Series after the first now label downward, and the offset moved off a CSS transform because the entrance tween animates y and GSAP rewrote it. - Added demo.html for the 11 components and the 3 transparent-root blocks. Without it generate-catalog-previews.ts skips components entirely, so the catalog-previews job failed for every component in the original PRs. - Tagged hw-title, hw-pipeline and hw-path-text as overlays. Also registers all catalog pages in docs.json, which the original PRs left orphaned, and picks up 4 pre-existing blocks that had no catalog page (camcorder-hud, editorial-flash-overlay, freeze-frame-dressing, organic-light-leak-overlay) because the regenerated nav now links them. Every item was verified by rendering it and looking at the frames. Co-authored-by: jbernard077 <jbernard077@users.noreply.github.com>
39 lines
1.2 KiB
Plaintext
39 lines
1.2 KiB
Plaintext
---
|
|
title: "On-Screen Display Effect"
|
|
description: "Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display"
|
|
---
|
|
|
|
# On-Screen Display Effect
|
|
|
|
Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display
|
|
|
|
`effect` `overlay` `texture`
|
|
|
|
<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-screen-warp.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-screen-warp.png" autoPlay muted loop playsInline />
|
|
|
|
## Install
|
|
|
|
<CodeGroup>
|
|
|
|
```bash Terminal
|
|
npx hyperframes add yt-screen-warp
|
|
```
|
|
|
|
</CodeGroup>
|
|
|
|
## Details
|
|
|
|
| Property | Value |
|
|
| --- | --- |
|
|
| Type | Component |
|
|
|
|
## Files
|
|
|
|
| File | Target | Type |
|
|
| --- | --- | --- |
|
|
| `yt-screen-warp.html` | `compositions/components/yt-screen-warp.html` | hyperframes:snippet |
|
|
|
|
## Usage
|
|
|
|
Open `compositions/components/yt-screen-warp.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.
|