mirror of
https://github.com/Nutlope/hallmark.git
synced 2026-08-14 12:35:33 +02:00
Worked examples: scroll-on-hover for the new cards, plus README + link polish
Give the five image cards (the four new themes and the Mend Assembly) a hover-scroll: each thumb is now a tall full-page screenshot, and CSS pans object-position top to bottom on hover so the page scrolls itself. No video, no JS, GPU-light; touch and reduced-motion get a static top crop. Cache-bust the regenerated thumbs. Trim the README Custom section to the single Mend Assembly feature (matching the landing) and de-dash the whole README. Fix three pre-existing dead doc links in the component cookbook (floating-nav, custom-craft, hero-enrichment were linked without the ../ that reaches the references root).
This commit is contained in:
Youssef
@@ -7,7 +7,7 @@
|
||||
Made by Together AI.
|
||||
|
||||
<p align="center">
|
||||
<img src="site/OG-hallmark.png" alt="Hallmark — A design skill that refuses to look AI-generated" />
|
||||
<img src="site/OG-hallmark.png" alt="Hallmark, a design skill that refuses to look AI-generated" />
|
||||
</p>
|
||||
|
||||
Hallmark picks a macrostructure for the brief, dresses it in one of twenty themes, runs fifty-seven slop-test gates plus a pre-emit self-critique, and refuses the on-distribution defaults every LLM was trained into. Two pages by Hallmark for two different briefs feel like different sites, not colour-swaps of the same template.
|
||||
@@ -21,17 +21,17 @@ Hallmark picks a macrostructure for the brief, dresses it in one of twenty theme
|
||||
| *(default)* | Build new UI. Picks a macrostructure, applies the rule-set, runs the slop test before handing back. |
|
||||
| `hallmark audit <target>` | Score existing code against the anti-patterns. Punch list, no edits. |
|
||||
| `hallmark redesign <target>` | Throw out the structure, keep copy + IA + brand, rebuild with a different fingerprint. |
|
||||
| `hallmark study <screenshot \| URL>` | Extract the **DNA** from a design you admire — macrostructure, type-pairing, colour anchor. Refuses pixel-clones and paid templates. Optionally emits a portable `design.md` for handoff to other AI tools. |
|
||||
| `hallmark study <screenshot \| URL>` | Extract the **DNA** from a design you admire: macrostructure, type-pairing, colour anchor. Refuses pixel-clones and paid templates. Optionally emits a portable `design.md` for handoff to other AI tools. |
|
||||
|
||||
---
|
||||
|
||||
## Different briefs, different shapes
|
||||
|
||||
Each generated by exercising the skill on a different brief. The skill picks differently every time — no two share a macrostructure or theme.
|
||||
Each generated by exercising the skill on a different brief. The skill picks differently every time. No two share a macrostructure or theme.
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="25%"><a href="https://www.usehallmark.com/examples/tally/"><img src="docs/screenshots/hero-tally.jpg" alt="Tally — SaaS product page hero" /></a></td>
|
||||
<td width="25%"><a href="https://www.usehallmark.com/examples/tally/"><img src="docs/screenshots/hero-tally.jpg" alt="Tally SaaS product page hero" /></a></td>
|
||||
<td width="25%"><a href="https://www.usehallmark.com/examples/wayfare/"><img src="docs/screenshots/hero-wayfare.jpg" alt="Wayfare travel booking hero" /></a></td>
|
||||
<td width="25%"><a href="https://www.usehallmark.com/_tests/09-slow-pour/"><img src="docs/screenshots/hero-slow-pour.jpg" alt="Slow Pour coffee subscription hero" /></a></td>
|
||||
<td width="25%"><a href="https://www.usehallmark.com/examples/bananastudio/"><img src="docs/screenshots/hero-bananastudio.jpg" alt="BananaStudio creative studio hero" /></a></td>
|
||||
@@ -62,26 +62,17 @@ Each page is self-contained HTML + CSS, stamped with its macrostructure in the C
|
||||
|
||||
## Custom <sup>NEW</sup>
|
||||
|
||||
Most briefs route to the catalog. But when a brief carries real creative intent — a named brand colour, a vibe the catalog can't carry, or a layout that *is* the point — Hallmark switches to **Custom** and designs the whole page from first principles: a made-to-measure OKLCH palette, a free-font pairing, and a structure no catalog theme would produce. Same fifty-seven slop-test gates. No template underneath.
|
||||
Most briefs route to the catalog. But when a brief carries real creative intent (a named brand colour, a vibe the catalog can't carry, or a layout that *is* the point) Hallmark switches to **Custom** and designs the whole page from first principles: a made-to-measure OKLCH palette, a free-font pairing, and a structure no catalog theme would produce. Same fifty-seven slop-test gates. No template underneath.
|
||||
|
||||
Four one-line briefs, four pages that share nothing:
|
||||
One brief, one page that looks like nothing else in the catalog:
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td width="25%"><a href="https://www.usehallmark.com/examples/custom-01/"><img src="site/_tests/_thumbs/custom-01.jpg" alt="Setting the Night Edition — a letterpress poem broadside" /></a></td>
|
||||
<td width="25%"><a href="https://www.usehallmark.com/examples/custom-02/"><img src="site/_tests/_thumbs/custom-02.jpg" alt="The Cascadia Nightjar — a sleeper-train ticket" /></a></td>
|
||||
<td width="25%"><a href="https://www.usehallmark.com/examples/custom-03/"><img src="site/_tests/_thumbs/custom-03.jpg" alt="Ferns & Fathom — a tea menu as a periodic table" /></a></td>
|
||||
<td width="25%"><a href="https://www.usehallmark.com/examples/custom-04/"><img src="site/_tests/_thumbs/custom-04.jpg" alt="The Mend Assembly — a repair-café manifesto poster" /></a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Setting the Night Edition</b><br/><sub>Letterpress poem broadside</sub></td>
|
||||
<td><b>The Cascadia Nightjar</b><br/><sub>Sleeper-train ticket</sub></td>
|
||||
<td><b>Ferns & Fathom</b><br/><sub>Tea menu as a periodic table</sub></td>
|
||||
<td><b>The Mend Assembly</b><br/><sub>Repair-café manifesto poster</sub></td>
|
||||
</tr>
|
||||
</table>
|
||||
<p align="center">
|
||||
<a href="https://www.usehallmark.com/examples/custom-04/"><img src="site/_tests/_thumbs/custom-04.jpg" width="560" alt="The Mend Assembly, a repair-café manifesto poster designed from scratch with Custom" /></a>
|
||||
</p>
|
||||
|
||||
Custom stays a quiet branch — vanilla briefs never see it. The protocol lives in [`custom-theme.md`](skills/hallmark/references/custom-theme.md).
|
||||
<p align="center"><sub><b>The Mend Assembly</b> · a repair-café manifesto poster, designed from first principles</sub></p>
|
||||
|
||||
Custom stays a quiet branch. Vanilla briefs never see it. The protocol lives in [`custom-theme.md`](skills/hallmark/references/custom-theme.md).
|
||||
|
||||
---
|
||||
|
||||
@@ -93,9 +84,9 @@ npx skills add nutlope/hallmark
|
||||
|
||||
Re-run any time to update. Or copy [`SKILL.md`](skills/hallmark/SKILL.md) + [`references/`](skills/hallmark/references/) into:
|
||||
|
||||
- **Claude Code** — `~/.claude/skills/hallmark/`
|
||||
- **Cursor** — `.cursor/rules/hallmark.mdc` (body of `SKILL.md`, no frontmatter)
|
||||
- **Codex** — `~/.codex/skills/hallmark/` (personal) or `.codex/skills/hallmark/` (project-scoped)
|
||||
- **Claude Code**: `~/.claude/skills/hallmark/`
|
||||
- **Cursor**: `.cursor/rules/hallmark.mdc` (body of `SKILL.md`, no frontmatter)
|
||||
- **Codex**: `~/.codex/skills/hallmark/` (personal) or `.codex/skills/hallmark/` (project-scoped)
|
||||
|
||||
The rule-set lives in [`SKILL.md`](skills/hallmark/SKILL.md) and [`references/`](skills/hallmark/references/). Worked examples in [`docs/recipes.md`](docs/recipes.md) and [`docs/study-examples.md`](docs/study-examples.md).
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 151 KiB After Width: | Height: | Size: 505 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 147 KiB After Width: | Height: | Size: 398 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 464 KiB After Width: | Height: | Size: 786 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 167 KiB After Width: | Height: | Size: 407 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 158 KiB After Width: | Height: | Size: 375 KiB |
@@ -3796,6 +3796,20 @@ html[data-theme="aurora"] body {
|
||||
.ex-card__thumb video { transition: none; }
|
||||
}
|
||||
|
||||
/* Hover scroll for the image cards (the four new themes + the bespoke build).
|
||||
The thumb is a tall full-page screenshot; on hover we pan object-position
|
||||
top → bottom so the page "scrolls" itself. Pure CSS, GPU-light, no video
|
||||
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:hover .ex-card__thumb img,
|
||||
.ex-card:focus-visible .ex-card__thumb img {
|
||||
object-position: left bottom;
|
||||
transition: object-position 5s ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
/* New card meta — single-line prompt only, mono. The card is the prompt
|
||||
that produced the output above it. */
|
||||
.ex-card__prompt {
|
||||
|
||||
+10
-10
@@ -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=19" />
|
||||
<link rel="stylesheet" href="css/base.css?v=19" />
|
||||
<link rel="stylesheet" href="css/components.css?v=19" />
|
||||
<link rel="stylesheet" href="css/sections.css?v=19" />
|
||||
<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" />
|
||||
|
||||
<script>
|
||||
// Load theme before paint to avoid flash. Order: ?theme= → localStorage → default.
|
||||
@@ -242,28 +242,28 @@
|
||||
<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">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/cobalt-01.jpg" alt="" loading="lazy" width="1600" height="1000" />
|
||||
<img src="_tests/_thumbs/cobalt-01.jpg?v=20" 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">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/carnival-01.jpg" alt="" loading="lazy" width="1600" height="1000" />
|
||||
<img src="_tests/_thumbs/carnival-01.jpg?v=20" 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">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/lumen-01.jpg" alt="" loading="lazy" width="1600" height="1000" />
|
||||
<img src="_tests/_thumbs/lumen-01.jpg?v=20" 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">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/hum-07.jpg" alt="" loading="lazy" width="1600" height="1000" />
|
||||
<img src="_tests/_thumbs/hum-07.jpg?v=20" 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>
|
||||
@@ -273,7 +273,7 @@
|
||||
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">
|
||||
<div class="ex-card__thumb" aria-hidden="true">
|
||||
<img src="_tests/_thumbs/custom-04.jpg" alt="" loading="lazy" width="1600" height="1000" />
|
||||
<img src="_tests/_thumbs/custom-04.jpg?v=20" 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>
|
||||
@@ -1120,7 +1120,7 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script type="module" src="js/main.js?v=19"></script>
|
||||
<script type="module" src="js/main.js?v=20"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -3,7 +3,7 @@ Display headline left, demo video right, the rightmost ~10–20 % extending past
|
||||
*Use when:* the brief is SaaS / dev-tool / dashboard / platform AND you have real footage of the product (or a hand-built CSS-art mockup of it).
|
||||
*Don't confuse with:* H4 Stat-Led (number-led, no video) or H8 Mockup Split (still screenshot, not video).
|
||||
|
||||
See [`hero-enrichment.md`](hero-enrichment.md) for the full E1 recipe (codec chain, autoplay rules, `prefers-reduced-motion` fallback, mobile collapse). The cookbook entry below is the structural sketch.
|
||||
See [`hero-enrichment.md`](../hero-enrichment.md) for the full E1 recipe (codec chain, autoplay rules, `prefers-reduced-motion` fallback, mobile collapse). The cookbook entry below is the structural sketch.
|
||||
|
||||
```html
|
||||
<section class="hero hero--clipped">
|
||||
|
||||
@@ -3,7 +3,7 @@ A single hand-built SVG (Tier B in the enrichment hierarchy — or pure CSS at T
|
||||
*Use when:* the brand has a *thing* that benefits from being drawn — a craft, a character, a process.
|
||||
*Don't confuse with:* H6 Photographic (real photography) or H8 Mockup (a product screenshot, not artwork).
|
||||
|
||||
The illustration itself is *built*, not picked from Storyset / Humaaans / unDraw / Lottie. See [`custom-craft.md`](custom-craft.md) for full recipes (CSS art, hand-built SVG, declarative animation). The cookbook entry below is the page-level structural sketch.
|
||||
The illustration itself is *built*, not picked from Storyset / Humaaans / unDraw / Lottie. See [`custom-craft.md`](../custom-craft.md) for full recipes (CSS art, hand-built SVG, declarative animation). The cookbook entry below is the page-level structural sketch.
|
||||
|
||||
```html
|
||||
<section class="hero-art">
|
||||
|
||||
@@ -12,7 +12,7 @@ A sticky bar at the top that **morphs into a floating pill** as the user scrolls
|
||||
</header>
|
||||
```
|
||||
|
||||
The full recipe — the four laws (height-constant, transform-for-offset, cross-fade-everything, single-curve), the property-morph table, the scroll-handler script, and the eight anti-patterns Hallmark refuses — lives in [`floating-nav.md`](floating-nav.md). Reach for that file *before* building this archetype. Skipping the four laws is what makes 90% of attempts read as broken.
|
||||
The full recipe — the four laws (height-constant, transform-for-offset, cross-fade-everything, single-curve), the property-morph table, the scroll-handler script, and the eight anti-patterns Hallmark refuses — lives in [`floating-nav.md`](../floating-nav.md). Reach for that file *before* building this archetype. Skipping the four laws is what makes 90% of attempts read as broken.
|
||||
|
||||
*Anti-pattern (one of eight in floating-nav.md):* swapping two `<header>` elements via opacity instead of cross-fading one DOM. Doubles markup, fights focus order, desyncs content.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user