External/hallmark
1
0
Fork 0
mirror of https://github.com/Nutlope/hallmark.git synced 2026-08-14 12:35:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Worked examples: full-page image hover-scroll on every card; bump to v1.1

Browse Source 
Replace the carousel's inconsistent scroll-videos with one CSS image hover-scroll
across all twelve cards. Each thumb is a tall full-page screenshot that pans top
to bottom on hover, with a per-card duration scaled to page height so they all
move at the same brisk, readable pace; captured Retina-sharp at 1400px wide.
Touch and reduced-motion get a static crop. Drop the Slow Pour card.

Bump the version to v1.1 on the landing (banner + footer), package.json, SKILL.md,
and the preview-block examples.
This commit is contained in:
Youssef
2026-06-02 20:20:23 +01:00
parent 7d870f70ec
commit 72f3dc052e
18 changed files with 52 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "hallmark",
"version": "1.0.0",
"version": "1.1.0",
"description": "A design skill for AI coding assistants. Makes the UIs they generate look made, not generated. Powered by Together AI.",
"keywords": [
"claude",
site/_tests/_thumbs/anya.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 269 KiB

site/_tests/_thumbs/bananastudio.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 510 KiB

site/_tests/_thumbs/carnival-01.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 505 KiB

After

Width:  |  Height:  |  Size: 537 KiB

site/_tests/_thumbs/cobalt-01.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 398 KiB

After

Width:  |  Height:  |  Size: 352 KiB

site/_tests/_thumbs/custom-04.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 786 KiB

After

Width:  |  Height:  |  Size: 1.1 MiB

site/_tests/_thumbs/hum-07.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 407 KiB

After

Width:  |  Height:  |  Size: 483 KiB

site/_tests/_thumbs/hyperlane.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 511 KiB

site/_tests/_thumbs/lumen-01.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 375 KiB

After

Width:  |  Height:  |  Size: 437 KiB

site/_tests/_thumbs/najm.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 310 KiB

site/_tests/_thumbs/soroe.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 KiB

site/_tests/_thumbs/tally.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 559 KiB

site/_tests/_thumbs/wayfare.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 437 KiB

site/css/components.css
+5 -2
View File
@@ -3802,11 +3802,14 @@ html[data-theme="aurora"] body {
decode. Touch devices and reduced-motion get a static top crop. Only the
<img> cards scroll; the original <video> cards keep their hover-play. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
.ex-card__thumb img { transition: object-position 600ms ease; }
.ex-card__thumb img { transition: object-position 400ms ease; }
.ex-card:hover .ex-card__thumb img,
.ex-card:focus-visible .ex-card__thumb img {
object-position: left bottom;
transition: object-position 5s ease-in-out;
/* steady, even scroll through the whole page; per-card duration is set
inline (--scroll-dur) proportional to page height so every card scrolls
at the same brisk speed. */
transition: object-position var(--scroll-dur, 2.4s) linear;
}
}
site/index.html
+38 -45
View File
@@ -56,10 +56,10 @@
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700;800&family=Anton&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,900;1,9..144,400;1,9..144,500&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=Hanken+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Inter+Tight:ital,wght@0,500;0,600;0,700;0,800;1,500;1,600;1,700&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400;1,6..72,500&family=Playfair+Display:ital,wght@1,400;1,500;1,600&family=Public+Sans:wght@400;500;600;700&family=Young+Serif&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" />
<link rel="stylesheet" href="css/tokens.css?v=20" />
<link rel="stylesheet" href="css/base.css?v=20" />
<link rel="stylesheet" href="css/components.css?v=20" />
<link rel="stylesheet" href="css/sections.css?v=20" />
<link rel="stylesheet" href="css/tokens.css?v=22" />
<link rel="stylesheet" href="css/base.css?v=22" />
<link rel="stylesheet" href="css/components.css?v=22" />
<link rel="stylesheet" href="css/sections.css?v=22" />
<script>
// Load theme before paint to avoid flash. Order: ?theme= → localStorage → default.
@@ -104,7 +104,7 @@
<header class="banner" role="banner">
<a class="banner__mark" href="#top" aria-label="Hallmark — top of page">
<span class="brand-mark" aria-hidden="true"><span class="brand-mark__slash">/</span><span class="brand-mark__name">hallmark</span></span>
<span class="banner__ver tnum">v1.0</span>
<span class="banner__ver tnum">v1.1</span>
</a>
<a class="banner__install" href="#install" aria-label="Jump to install section">Install</a>
@@ -240,30 +240,30 @@
<!-- New-theme showcase. Scroll previews via Remotion from the live pages
(see examples/scroll-demos.json); swap each <img> for
<video data-hover-play src="_tests/_thumbs/<slug>-scroll.mp4" poster="..."> once rendered. -->
<a class="ex-card" role="listitem" href="examples/cobalt-01/" target="_blank" rel="noopener" aria-label="Open the Distil example — content-extraction API, Cobalt — in a new tab">
<a class="ex-card" style="--scroll-dur:2.5s" role="listitem" href="examples/cobalt-01/" target="_blank" rel="noopener" aria-label="Open the Distil example — content-extraction API, Cobalt — in a new tab">
<div class="ex-card__thumb" aria-hidden="true">
<img src="_tests/_thumbs/cobalt-01.jpg?v=20" alt="" loading="lazy" width="1600" height="1000" />
<img src="_tests/_thumbs/cobalt-01.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
</div>
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a content-extraction API, Cobalt</p>
</a>
<a class="ex-card" role="listitem" href="examples/carnival-01/" target="_blank" rel="noopener" aria-label="Open the Cold Snap example — record-label EP page, Carnival — in a new tab">
<a class="ex-card" style="--scroll-dur:2.7s" role="listitem" href="examples/carnival-01/" target="_blank" rel="noopener" aria-label="Open the Cold Snap example — record-label EP page, Carnival — in a new tab">
<div class="ex-card__thumb" aria-hidden="true">
<img src="_tests/_thumbs/carnival-01.jpg?v=20" alt="" loading="lazy" width="1600" height="1000" />
<img src="_tests/_thumbs/carnival-01.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
</div>
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a record-label EP page, Carnival</p>
</a>
<a class="ex-card" role="listitem" href="examples/lumen-01/" target="_blank" rel="noopener" aria-label="Open the Cinder example — AI reasoning tool, Lumen — in a new tab">
<a class="ex-card" style="--scroll-dur:3.1s" role="listitem" href="examples/lumen-01/" target="_blank" rel="noopener" aria-label="Open the Cinder example — AI reasoning tool, Lumen — in a new tab">
<div class="ex-card__thumb" aria-hidden="true">
<img src="_tests/_thumbs/lumen-01.jpg?v=20" alt="" loading="lazy" width="1600" height="1000" />
<img src="_tests/_thumbs/lumen-01.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
</div>
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build an AI reasoning tool, Lumen</p>
</a>
<a class="ex-card" role="listitem" href="examples/hum-07/" target="_blank" rel="noopener" aria-label="Open the Bubble example, a guided sourdough app, Hum, in a new tab">
<a class="ex-card" style="--scroll-dur:3.3s" role="listitem" href="examples/hum-07/" target="_blank" rel="noopener" aria-label="Open the Bubble example, a guided sourdough app, Hum, in a new tab">
<div class="ex-card__thumb" aria-hidden="true">
<img src="_tests/_thumbs/hum-07.jpg?v=20" alt="" loading="lazy" width="1600" height="1000" />
<img src="_tests/_thumbs/hum-07.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
</div>
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a guided sourdough app, Hum</p>
</a>
@@ -271,65 +271,58 @@
<!-- Custom / bespoke showcase. One featured bespoke build; the others live under
site/examples/custom-*. Scroll preview via Remotion (see examples/scroll-demos.json);
once rendered, swap the <img> for <video data-hover-play src="..." poster="...">. -->
<a class="ex-card" role="listitem" href="examples/custom-04/" target="_blank" rel="noopener" aria-label="Open the Mend Assembly example, a repair-café manifesto poster, custom, in a new tab">
<a class="ex-card" style="--scroll-dur:4s" role="listitem" href="examples/custom-04/" target="_blank" rel="noopener" aria-label="Open the Mend Assembly example, a repair-café manifesto poster, custom, in a new tab">
<div class="ex-card__thumb" aria-hidden="true">
<img src="_tests/_thumbs/custom-04.jpg?v=20" alt="" loading="lazy" width="1600" height="1000" />
<img src="_tests/_thumbs/custom-04.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
</div>
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a repair-café manifesto poster, custom</p>
</a>
<a class="ex-card" role="listitem" href="examples/tally/" target="_blank" rel="noopener" aria-label="Open the Tally example — SaaS product page, modern-minimal — in a new tab">
<div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
<video data-hover-play src="_tests/_thumbs/SaaS-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
<a class="ex-card" style="--scroll-dur:3.6s" role="listitem" href="examples/tally/" target="_blank" rel="noopener" aria-label="Open the Tally example, a SaaS product page, modern-minimal, in a new tab">
<div class="ex-card__thumb" aria-hidden="true">
<img src="_tests/_thumbs/tally.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
</div>
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a SaaS product page, modern-minimal</p>
</a>
<a class="ex-card" role="listitem" href="examples/wayfare/" target="_blank" rel="noopener" aria-label="Open the Wayfare example — travel booking site, atmospheric — in a new tab">
<div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
<video data-hover-play src="_tests/_thumbs/wayfare-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
<a class="ex-card" style="--scroll-dur:3s" role="listitem" href="examples/wayfare/" target="_blank" rel="noopener" aria-label="Open the Wayfare example, a travel booking site, atmospheric, in a new tab">
<div class="ex-card__thumb" aria-hidden="true">
<img src="_tests/_thumbs/wayfare.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
</div>
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a travel booking site, atmospheric</p>
</a>
<a class="ex-card" role="listitem" href="_tests/09-slow-pour/" target="_blank" rel="noopener" aria-label="Open the Slow Pour example — small-batch coffee subscription — in a new tab">
<div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
<video data-hover-play src="_tests/_thumbs/slow-pour-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
</div>
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a small-batch coffee subscription page</p>
</a>
<a class="ex-card" role="listitem" href="examples/bananastudio/" target="_blank" rel="noopener" aria-label="Open the BananaStudio example — creative studio with playful motion — in a new tab">
<div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
<video data-hover-play src="_tests/_thumbs/BananaStudio-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
<a class="ex-card" style="--scroll-dur:3.2s" role="listitem" href="examples/bananastudio/" target="_blank" rel="noopener" aria-label="Open the BananaStudio example, a creative studio with playful motion, in a new tab">
<div class="ex-card__thumb" aria-hidden="true">
<img src="_tests/_thumbs/bananastudio.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
</div>
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a creative studio with playful motion</p>
</a>
<a class="ex-card" role="listitem" href="_tests/06-anya-portfolio/" target="_blank" rel="noopener" aria-label="Open the Anya Reis example — software architect personal site — in a new tab">
<div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
<video data-hover-play src="_tests/_thumbs/anya-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
<a class="ex-card" style="--scroll-dur:1.8s" role="listitem" href="_tests/06-anya-portfolio/" target="_blank" rel="noopener" aria-label="Open the Anya Reis example, a software architect personal site, in a new tab">
<div class="ex-card__thumb" aria-hidden="true">
<img src="_tests/_thumbs/anya.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
</div>
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a software architect personal site</p>
</a>
<a class="ex-card" role="listitem" href="examples/najm/" target="_blank" rel="noopener" aria-label="Open the NAJM example — Moroccan fashion brand landing page — in a new tab">
<div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
<video data-hover-play src="_tests/_thumbs/Najm-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
<a class="ex-card" style="--scroll-dur:2s" role="listitem" href="examples/najm/" target="_blank" rel="noopener" aria-label="Open the NAJM example, a Moroccan fashion brand landing page, in a new tab">
<div class="ex-card__thumb" aria-hidden="true">
<img src="_tests/_thumbs/najm.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
</div>
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a Moroccan fashion brand landing page</p>
</a>
<a class="ex-card" role="listitem" href="_tests/11-soroe-ceramics/" target="_blank" rel="noopener" aria-label="Open the Soroe example — small ceramics studio site — in a new tab">
<div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
<video data-hover-play src="_tests/_thumbs/Soroe-loop.mp4" autoplay loop muted playsinline preload="metadata" width="1804" height="1080"></video>
<a class="ex-card" style="--scroll-dur:1.7s" role="listitem" href="_tests/11-soroe-ceramics/" target="_blank" rel="noopener" aria-label="Open the Soroe example, a small ceramics studio site, in a new tab">
<div class="ex-card__thumb" aria-hidden="true">
<img src="_tests/_thumbs/soroe.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
</div>
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a small ceramics studio site</p>
</a>
<a class="ex-card" role="listitem" href="examples/hyperlane/" target="_blank" rel="noopener" aria-label="Open the Hyperlane example — developer infrastructure landing page — in a new tab">
<div class="ex-card__thumb ex-card__thumb--video" aria-hidden="true">
<video data-hover-play src="_tests/_thumbs/Hyperlane-example.mp4" autoplay loop muted playsinline preload="metadata" width="1784" height="1080"></video>
<a class="ex-card" style="--scroll-dur:3.5s" role="listitem" href="examples/hyperlane/" target="_blank" rel="noopener" aria-label="Open the Hyperlane example, a developer infrastructure landing page, in a new tab">
<div class="ex-card__thumb" aria-hidden="true">
<img src="_tests/_thumbs/hyperlane.jpg?v=22" alt="" loading="lazy" width="1600" height="1000" />
</div>
<p class="ex-card__prompt"><span class="ex-card__prompt-mark">$</span> /hallmark build a developer infrastructure landing page</p>
</a>
@@ -1084,7 +1077,7 @@
<div class="foot__masthead">
<span class="foot__wordmark" aria-label="Hallmark"><span class="brand-mark brand-mark--lg" aria-hidden="true"><span class="brand-mark__slash">/</span><span class="brand-mark__name">hallmark</span></span></span>
<span class="foot__version tnum">v1.0 · MMXXVI</span>
<span class="foot__version tnum">v1.1 · MMXXVI</span>
</div>
<div class="foot__grid">
@@ -1120,7 +1113,7 @@
</div>
</template>
<script type="module" src="js/main.js?v=20"></script>
<script type="module" src="js/main.js?v=22"></script>
</body>
</html>
site/js/main.js
+2 -2
View File
@@ -413,7 +413,7 @@ const COPY = {
letterBody: "The polished-SaaS school of restraint, but warmer. Warm-grey paper instead of pure white; coral accent on focus rings and small marks. Pill CTAs, two-column heroes, generous space.",
signoff: "Yours,",
captionA: "Coral",
captionB: "v1.0",
captionB: "v1.1",
},
aurora: {
eyebrow: "Atmospheric · cool",
@@ -536,7 +536,7 @@ const COPY = {
letterBody: "The dev-tool register, executed with restraint: a cool near-white canvas, hairlines doing the structural work, one electric cobalt accent reserved for the signal — a live request, a 200, a focused field. Space Grotesk for headings, Inter for prose, JetBrains Mono for the code.",
signoff: "Ship it,",
captionA: "Cobalt",
captionB: "v1.0",
captionB: "v1.1",
},
};
skills/hallmark/SKILL.md
+2 -2
View File
@@ -1,7 +1,7 @@
---
name: hallmark
description: "Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots. Use when the user asks to build a new app or landing page, wants to redesign something, invokes Hallmark by name, or uses audit/redesign/study."
version: 1.0.0
version: 1.1.0
---
# Hallmark
@@ -409,7 +409,7 @@ Before emitting any code, output a tight summary of what you're about to ship. T
**Format** (Markdown bullets, not ASCII boxes — they render reliably across every chat client and terminal):
```markdown
**Hallmark · v1.0.0**
**Hallmark · v1.1.0**
- **Macrostructure** · Stat-Led
- **Theme** · Plain (#fff paper · cool greys · ink-blue accent)
skills/hallmark/references/preview-examples.md
+4 -4
View File
@@ -5,7 +5,7 @@ Four sample Step 5 preview blocks for the model to imitate, varied across macros
---
*Long Document (editorial, motion-cut):*
> **Hallmark · v1.0.0**
> **Hallmark · v1.1.0**
>
> - **Macrostructure** · Long Document
> - **Theme** · Newsprint (cool slate paper · steel-blue accent · geometric sans)
@@ -16,7 +16,7 @@ Four sample Step 5 preview blocks for the model to imitate, varied across macros
> - **Diversification** · first run for this project
*Bento Grid (SaaS, motion-on):*
> **Hallmark · v1.0.0**
> **Hallmark · v1.1.0**
>
> - **Macrostructure** · Bento Grid
> - **Theme** · Newsprint (cool slate paper · steel-blue accent · geometric sans)
@@ -27,7 +27,7 @@ Four sample Step 5 preview blocks for the model to imitate, varied across macros
> - **Diversification** · differs from Plain on paper hue (light-cool vs pure-white) + accent (indigo vs ink-blue)
*Manifesto (declarative, no enrichment):*
> **Hallmark · v1.0.0**
> **Hallmark · v1.1.0**
>
> - **Macrostructure** · Manifesto
> - **Theme** · Manifesto (dark · Inter Tight 900 · single red bleed)
@@ -38,7 +38,7 @@ Four sample Step 5 preview blocks for the model to imitate, varied across macros
> - **Diversification** · differs from Newsprint on paper band (dark vs light) + display style (display-heavy vs geometric-sans)
*Custom (Coffeebox archival café):*
> **Hallmark · v1.0.0**
> **Hallmark · v1.1.0**
>
> - **Macrostructure** · Long Document
> - **Theme** · custom (vibe: "archival warmth, hand-set, no varnish" · paper oklch(94% 0.020 65) · accent oklch(58% 0.16 35) terracotta · Fraunces italic display + Source Serif 4 body)