mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-11-15 13:58:20 +00:00
feat(registry): add mk-logo-sting — outline logo sting
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jbernard077
co-authored by
Claude Fable 5
Claude Fable 5
parent
4ce35b7cba
commit
44cd520253
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: "Outline Logo Sting"
|
||||
description: "A hairline rounded-square outline draws on and the logo lands inside — image or text wordmark in the same shell"
|
||||
---
|
||||
|
||||
# Outline Logo Sting
|
||||
|
||||
A hairline rounded-square outline draws on and the logo lands inside — image or text wordmark in the same shell
|
||||
|
||||
`logo` `sting` `minimal`
|
||||
|
||||
<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/blocks/mk-logo-sting.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-logo-sting.png" autoPlay muted loop playsInline />
|
||||
|
||||
## Install
|
||||
|
||||
<CodeGroup>
|
||||
|
||||
```bash Terminal
|
||||
npx hyperframes add mk-logo-sting
|
||||
```
|
||||
|
||||
</CodeGroup>
|
||||
|
||||
## Details
|
||||
|
||||
| Property | Value |
|
||||
| --- | --- |
|
||||
| Type | Block |
|
||||
| Dimensions | 1920×1080 |
|
||||
| Duration | 3.5s |
|
||||
|
||||
## Files
|
||||
|
||||
| File | Target | Type |
|
||||
| --- | --- | --- |
|
||||
| `mk-logo-sting.html` | `compositions/mk-logo-sting.html` | hyperframes:composition |
|
||||
|
||||
## Usage
|
||||
|
||||
After installing, add the block to your host composition:
|
||||
|
||||
```html
|
||||
<div data-composition-id="mk-logo-sting" data-composition-src="compositions/mk-logo-sting.html" data-start="0" data-duration="3.5" data-track-index="1" data-width="1920" data-height="1080"></div>
|
||||
```
|
||||
+174
@@ -0,0 +1,174 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
|
||||
<style>
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body {
|
||||
background: transparent;
|
||||
overflow: hidden;
|
||||
}
|
||||
#mk-ls-root {
|
||||
/* ---- mk tokens: override in the host to re-skin the family ---- */
|
||||
--mk-font: "Inter", -apple-system, sans-serif;
|
||||
--mk-ink: #1d1d1f;
|
||||
--mk-ink-dim: #6e6e73;
|
||||
--mk-hairline: 3px;
|
||||
|
||||
position: relative;
|
||||
width: 1920px;
|
||||
height: 1080px;
|
||||
overflow: hidden;
|
||||
background: transparent; /* overlays footage or mk-background */
|
||||
font-family: var(--mk-font);
|
||||
}
|
||||
#mk-ls-svg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
#mk-ls-outline {
|
||||
fill: none;
|
||||
stroke: var(--mk-ink);
|
||||
stroke-width: var(--mk-hairline);
|
||||
}
|
||||
#mk-ls-logo {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
#mk-ls-logo img {
|
||||
width: 72%;
|
||||
height: 72%;
|
||||
object-fit: contain;
|
||||
}
|
||||
#mk-ls-text {
|
||||
font-weight: 600;
|
||||
font-size: 120px;
|
||||
letter-spacing: -0.03em;
|
||||
color: var(--mk-ink);
|
||||
}
|
||||
#mk-ls-caption {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
font-size: 32px;
|
||||
color: var(--mk-ink-dim);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
id="mk-ls-root"
|
||||
data-composition-id="mk-logo-sting"
|
||||
data-start="0"
|
||||
data-duration="3.5"
|
||||
data-width="1920"
|
||||
data-height="1080"
|
||||
>
|
||||
<svg id="mk-ls-svg" viewBox="0 0 1920 1080">
|
||||
<rect id="mk-ls-outline"></rect>
|
||||
</svg>
|
||||
<div id="mk-ls-logo"><span id="mk-ls-text"></span></div>
|
||||
<div id="mk-ls-caption"></div>
|
||||
<div
|
||||
id="mk-ls-drv"
|
||||
class="clip"
|
||||
data-start="0"
|
||||
data-duration="3.5"
|
||||
data-track-index="0"
|
||||
style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none"
|
||||
></div>
|
||||
</div>
|
||||
<script>
|
||||
(function () {
|
||||
window.__timelines = window.__timelines || {};
|
||||
|
||||
/* ---- published parameters (inspector-style CONFIG) ----
|
||||
A logo preset: hairline rounded-square outline draws on, the
|
||||
logo lands inside. logoType switches drop-zone image <-> wordmark
|
||||
text (same animation shell — one logoType toggle). */
|
||||
var CONFIG = {
|
||||
// no scheme param — scheme-agnostic; re-skin via the --mk-* tokens
|
||||
logoType: "text", // "text" | "image"
|
||||
text: "HF",
|
||||
src: null, // image path when logoType === "image"
|
||||
boxSize: 340, // outline square, px
|
||||
radius: 72,
|
||||
caption: "Built with HyperFrames",
|
||||
animationOut: true,
|
||||
};
|
||||
|
||||
var W = 1920,
|
||||
H = 1080,
|
||||
DUR = 3.5;
|
||||
|
||||
var root = document.getElementById("mk-ls-root");
|
||||
var outline = document.getElementById("mk-ls-outline");
|
||||
var logo = document.getElementById("mk-ls-logo");
|
||||
var textEl = document.getElementById("mk-ls-text");
|
||||
var caption = document.getElementById("mk-ls-caption");
|
||||
|
||||
var S = CONFIG.boxSize;
|
||||
var bx = (W - S) / 2,
|
||||
by = (H - S) / 2 - 40;
|
||||
outline.setAttribute("x", bx);
|
||||
outline.setAttribute("y", by);
|
||||
outline.setAttribute("width", S);
|
||||
outline.setAttribute("height", S);
|
||||
outline.setAttribute("rx", CONFIG.radius);
|
||||
|
||||
logo.style.left = bx + "px";
|
||||
logo.style.top = by + "px";
|
||||
logo.style.width = S + "px";
|
||||
logo.style.height = S + "px";
|
||||
logo.style.borderRadius = CONFIG.radius + "px";
|
||||
|
||||
if (CONFIG.logoType === "image" && CONFIG.src) {
|
||||
textEl.remove();
|
||||
var img = document.createElement("img");
|
||||
img.src = CONFIG.src;
|
||||
logo.appendChild(img);
|
||||
} else {
|
||||
textEl.textContent = CONFIG.text;
|
||||
}
|
||||
|
||||
caption.textContent = CONFIG.caption;
|
||||
caption.style.top = by + S + 48 + "px";
|
||||
|
||||
var tl = gsap.timeline({ paused: true });
|
||||
|
||||
/* outline draws on */
|
||||
var len = outline.getTotalLength();
|
||||
gsap.set(outline, { strokeDasharray: len, strokeDashoffset: len });
|
||||
tl.to(outline, { strokeDashoffset: 0, duration: 1.0, ease: "power2.inOut" }, 0.15);
|
||||
|
||||
/* logo lands inside */
|
||||
gsap.set(logo, { opacity: 0, scale: 0.82 });
|
||||
tl.to(logo, { opacity: 1, scale: 1, duration: 0.6, ease: "back.out(1.2)" }, 0.85);
|
||||
|
||||
/* caption */
|
||||
gsap.set(caption, { opacity: 0, y: 12 });
|
||||
tl.to(caption, { opacity: 1, y: 0, duration: 0.5, ease: "power2.out" }, 1.35);
|
||||
|
||||
/* exit + hard kill */
|
||||
if (CONFIG.animationOut) {
|
||||
tl.to([logo, caption], { opacity: 0, duration: 0.35, ease: "power2.in" }, DUR - 0.55);
|
||||
tl.to(outline, { opacity: 0, duration: 0.35, ease: "power2.in" }, DUR - 0.5);
|
||||
}
|
||||
tl.set(root, { visibility: "hidden" }, DUR - 0.02);
|
||||
|
||||
window.__timelines["mk-logo-sting"] = tl;
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,24 @@
|
||||
{
|
||||
"$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
|
||||
"name": "mk-logo-sting",
|
||||
"type": "hyperframes:block",
|
||||
"title": "Outline Logo Sting",
|
||||
"description": "A hairline rounded-square outline draws on and the logo lands inside \u2014 image or text wordmark in the same shell",
|
||||
"tags": [
|
||||
"logo",
|
||||
"sting",
|
||||
"minimal"
|
||||
],
|
||||
"dimensions": {
|
||||
"width": 1920,
|
||||
"height": 1080
|
||||
},
|
||||
"duration": 3.5,
|
||||
"files": [
|
||||
{
|
||||
"path": "mk-logo-sting.html",
|
||||
"target": "compositions/mk-logo-sting.html",
|
||||
"type": "hyperframes:composition"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -587,6 +587,10 @@
|
||||
"name": "mk-line-graph",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "mk-logo-sting",
|
||||
"type": "hyperframes:block"
|
||||
},
|
||||
{
|
||||
"name": "parallax-zoom",
|
||||
"type": "hyperframes:component"
|
||||
|
||||
Reference in New Issue
Block a user