Spaces:
Running
Running
Download index.html from Chunte/HFBA: direct link, hf CLI and curl.
- Browser
- Download file 136 kB
-
https://huggingface.co/spaces/Chunte/HFBA/resolve/main/index.html
- Command line
-
hf download hf://spaces/Chunte/HFBA/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Chunte/HFBA/resolve/main/index.html
136 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.min.js" defer></script>
<script>
function downloadImage(url, filename) {
var link = document.createElement("a");
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
<style>
/* Hover: a fill slightly darker than the card surface (ink-tinted so it
tracks both themes). Padding + negative margin keep layout unshifted. */
.download-button { transition: transform 0.2s, background-color .15s; padding: 5px 8px; margin: -5px -8px; border-radius: 9px; }
.download-button:hover { background-color: color-mix(in srgb, var(--ink) 9%, transparent); }
.download-button:active { transform: scale(0.80); }
/* ---- Color themes (toggle, bottom-right) ----
"motion" = motiondesign.school palette: warm cream page, charcoal ink +
dark inverted pills. "bluish" = the previous HFBA blue theme. */
:root, [data-theme="motion"] { --bg: #E9E6DD; --header-bg: rgba(233,230,221,.92); --surface: #FBF8F1; --ink: #232323; --muted: #8C8C8C; --muted-2: #555555; --accent: #232323; --accent-text: #ffffff; --border: #D8D3C8; --focus-ring: rgba(35,35,35,.12); }
[data-theme="bluish"] { --bg: #F3F7FA; --header-bg: rgba(243,247,250,.9); --surface: #FFFFFF; --ink: #4D5862; --muted: #9aa6b1; --muted-2: #6b7280; --accent: #3B82F6; --accent-text: #ffffff; --border: #D2DAE1; --focus-ring: rgba(59,130,246,.15); }
body { background-color: var(--bg); }
#theme-toggle { display: none; }
#theme-toggle button { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; padding: 0; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .12s; }
#theme-toggle button.active { outline-color: var(--ink); }
.sw-motion { background: #E9E6DD; border: 3px solid #232323; }
.sw-bluish { background: #F3F7FA; border: 3px solid #3B82F6; }
/* ---- Brand header + swappable display font ---- */
:root { --font-display: 'Chewy', 'Source Sans 3', cursive; }
[data-font="shantell"] { --font-display: 'Shantell Sans', 'Source Sans 3', cursive; }
[data-font="chewy"] { --font-display: 'Chewy', 'Source Sans 3', cursive; }
[data-font="titan"] { --font-display: 'Titan One', 'Source Sans 3', cursive; }
[data-font="bagel"] { --font-display: 'Bagel Fat One', 'Source Sans 3', cursive; }
[data-font="luckiest"] { --font-display: 'Luckiest Guy', 'Source Sans 3', cursive; }
/* Shantell Sans is a variable font with glyph-level irregularity: the BNCE
(bounce) axis + contextual alternates make repeated letters render as
different drawings — organic variation from the font itself, no hacks. */
[data-font="shantell"] .huggiverse-title { font-variation-settings: 'BNCE' 38, 'INFM' 72; font-weight: 800; font-feature-settings: 'calt' 1; }
[data-font="chewy"] .huggiverse-title, [data-font="titan"] .huggiverse-title, [data-font="bagel"] .huggiverse-title, [data-font="luckiest"] .huggiverse-title { font-variation-settings: normal; font-weight: 600; }
#site-header { background: var(--bg); }
.site-inner { padding-top: 8px; padding-bottom: 6px; }
/* Centered hero (matches motiondesign.school/blog); filter row below stays
left-aligned with the grid. */
#hero { padding: 46px 0 26px; text-align: center; }
.huggiverse-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 9vw, 6.75rem); line-height: 1.0; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.hero-sub { font-family: 'Source Sans 3', sans-serif; font-size: clamp(16px, 1.9vw, 19px); color: var(--muted-2); margin: 32px auto 0; max-width: 40rem; line-height: 1.5; letter-spacing: .005em; }
/* Secondary link (e.g. "View official HF branding guideline"): muted, tracks
the theme, darkens to ink on hover. */
.brand-link { color: var(--muted-2); }
.brand-link:hover { color: var(--ink); }
/* Asset name (the file name under each card). Tailwind's font-sans resolves to
'Source Sans Pro', which we don't load — pin it to the loaded Source Sans 3
at a clearer weight, themed ink. Extension labels track the theme too. */
/* Always one line: truncate long names with an ellipsis so every card is the
same height and the grid stays aligned at any screen size. min-width:0 lets
the title shrink beside the download button in the flex row. */
.asset-name { font-family: 'Source Sans 3', sans-serif; font-weight: 600; color: var(--ink); letter-spacing: -.005em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.font-toggle { display: none; }
.font-toggle .ft-label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); margin-right: 2px; }
.font-toggle button { font-size: 15px; line-height: 1; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 15px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.font-toggle button:hover { border-color: var(--muted); }
.font-toggle button.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
/* ---- Search ---- */
#search-header { position: sticky; top: 0; z-index: 30; background: var(--header-bg); backdrop-filter: blur(8px); }
/* .search-inner reuses the page `container mx-auto px-5` so its edges align
with the gallery grid at every breakpoint; only vertical padding is custom. */
.search-inner { padding-top: 14px; padding-bottom: 14px; }
.search-wrap { display: flex; align-items: center; gap: 12px; max-width: 820px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 13px 22px; box-shadow: 0 8.5px 28.4px rgba(192,198,204,.25); transition: border-color .15s, box-shadow .15s; }
.search-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.search-wrap svg { flex: 0 0 auto; color: var(--muted); }
#q { flex: 1 1 auto; border: none; outline: none; background: transparent; font-family: 'Source Sans 3', sans-serif; font-size: 17px; color: var(--ink); }
#q::placeholder { color: var(--muted); }
#q-clear { flex: 0 0 auto; border: none; background: #EFEFEF; color: var(--muted-2); width: 24px; height: 24px; border-radius: 999px; cursor: pointer; font-size: 15px; line-height: 1; display: none; }
#q-clear.show { display: inline-flex; align-items: center; justify-content: center; }
.kbd { flex: 0 0 auto; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; }
/* grid-template-rows 1fr->0fr animates the real content height to 0 smoothly,
regardless of how many rows the chips wrap to — no max-height guess, no clip. */
#chips-collapse { display: grid; grid-template-rows: 1fr; margin-top: 10px; transition: grid-template-rows .26s ease, opacity .18s ease, margin-top .26s ease; }
#search-header.condensed #chips-collapse { grid-template-rows: 0fr; opacity: 0; margin-top: 0; pointer-events: none; }
#chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; overflow: hidden; min-height: 0; }
/* Chip fill matches motiondesign.school's filter pills: a ~5% ink tint over
the page bg, borderless. color-mix keeps it correct in both themes. */
.chip { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, var(--bg)); border: 1px solid transparent; border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.chip:hover { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
#results-bar { display: none; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
#results-bar.show { display: flex; }
#results-count { font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: var(--muted); }
#results-count b { color: var(--muted-2); }
#results-clear { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--muted-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
#searchResults { display: none; }
#searchResults.show { display: grid; }
/* results + "more" render uniform (no 2x2 heroes) */
#searchResults > *, #moreResults > * { grid-column: auto !important; grid-row: auto !important; }
/* "More to explore" — every non-matching asset, for seamless browsing */
#more-section { display: none; }
#more-section.show { display: block; }
#more-heading { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 30px 0 18px; padding-top: 24px; border-top: 1px solid var(--border); }
#moreResults { display: grid; }
#no-results { display: none; text-align: center; padding: 60px 20px; color: var(--muted-2); }
#no-results.show { display: block; }
#no-results .big { font-family: 'IBM Plex Mono', monospace; font-size: 20px; color: var(--ink); margin-bottom: 8px; }
mark { background: #FEF08A; color: inherit; border-radius: 3px; padding: 0 1px; }
/* Heroes alternate sides at the 4-col breakpoint so the 2x2 feature tiles
zigzag (left, right, left...) instead of all hugging columns 1-2.
grid-auto-flow:dense backfills the singles around them with no gaps. */
@media (min-width: 768px) {
#ModernHuggies .card-grid > .hero-left { grid-column: 1 / span 2; }
#ModernHuggies .card-grid > .hero-right { grid-column: 3 / span 2; }
}
/* HF Huggiverse — screen-edge card curvature.
Scroll-driven, GPU-composited, no JS, no deps, no image changes. Cards
curve away near the top/bottom viewport edges; flat through the middle.
Gated behind @supports (Chromium 115+) — everyone else gets the flat
grid, no cost. Reduced-motion users get the flat grid too. Do NOT add
will-change here: ~195 cards = 195 permanent GPU layers for no gain. */
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.card-grid > * {
--hf-curve: 10; /* edge tilt in degrees — 8-12 is tasteful */
transform-origin: center;
animation: hf-edge linear both;
animation-timeline: view();
animation-range: cover 0% cover 100%;
}
@keyframes hf-edge {
0% {
opacity: calc(1 - var(--hf-curve) * .03);
transform: perspective(1400px)
rotateX(calc(var(--hf-curve) * -1deg))
translateZ(calc(var(--hf-curve) * -6px))
scale(calc(1 - var(--hf-curve) * .006));
}
18%, 82% {
opacity: 1;
transform: perspective(1400px) rotateX(0deg) translateZ(0) scale(1);
}
100% {
opacity: calc(1 - var(--hf-curve) * .03);
transform: perspective(1400px)
rotateX(calc(var(--hf-curve) * 1deg))
translateZ(calc(var(--hf-curve) * -6px))
scale(calc(1 - var(--hf-curve) * .006));
}
}
}
}
</style>
<link rel="stylesheet" href="css/style.css" />
<style>
.bg-blue-500 { background-color: var(--accent) !important; }
.bg-white { background-color: var(--surface) !important; }
.text-BluishDark { color: var(--ink) !important; }
.text-gray-500 { color: var(--muted-2) !important; }
</style>
<title>HF Huggiverse — Hugging Face Brand Assets</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Source+Sans+3:ital,wght@0,400;0,600;1,400&family=Chewy&family=Titan+One&family=Bagel+Fat+One&family=Luckiest+Guy&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Shantell+Sans:BNCE,INFM,wght@-100..100,0..100,300..800&display=swap" rel="stylesheet">
</head>
<body>
<script>
/* theme locked to default (motion) — toggle hidden */
</script>
<div id="site-header">
<div class="container mx-auto px-5 site-inner">
<div id="hero">
<h1 class="huggiverse-title">HF Huggiverse</h1>
<p class="hero-sub">Explore and grab Hugging Face graphic assets</p>
<div class="font-toggle" role="group" aria-label="Title font">
<span class="ft-label">Title font</span>
<button type="button" data-setfont="shantell" style="font-family:'Shantell Sans',cursive;font-variation-settings:'BNCE' 38,'INFM' 72;font-weight:700;">Shantell</button>
<button type="button" data-setfont="chewy" style="font-family:'Chewy',cursive;">Chewy</button>
<button type="button" data-setfont="titan" style="font-family:'Titan One',cursive;">Titan One</button>
<button type="button" data-setfont="bagel" style="font-family:'Bagel Fat One',cursive;">Bagel Fat One</button>
<button type="button" data-setfont="luckiest" style="font-family:'Luckiest Guy',cursive;">Luckiest Guy</button>
</div>
</div>
</div>
</div>
<header id="search-header">
<div class="container mx-auto px-5 search-inner">
<div class="search-wrap" role="search">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
<input id="q" type="text" autocomplete="off" spellcheck="false" aria-label="Search assets"
placeholder="Search Huggies">
<button id="q-clear" aria-label="Clear search">×</button>
<span class="kbd">/</span>
</div>
<div id="chips-collapse">
<div id="chips">
<button class="chip" data-q="headphones">headphones</button>
<button class="chip" data-q="coding">coding</button>
<button class="chip" data-q="gpu">gpu</button>
<button class="chip" data-q="wizard">wizard</button>
<button class="chip" data-q="dancing">dancing</button>
<button class="chip" data-q="chef">chef</button>
<button class="chip" data-q="robot">robot</button>
<button class="chip" data-q="dragon">dragon</button>
<button class="chip" data-q="logo">logo</button>
<button class="chip" data-q="outlined">outlined</button>
</div>
</div>
</div>
</header>
<div class="container px-5 py-10 mx-auto">
<div id="results-bar">
<span id="results-count"></span>
<button id="results-clear">Clear search</button>
</div>
<div id="searchResults" class="grid grid-cols-2 md:grid-cols-4 gap-x-5 gap-y-10"></div>
<div id="more-section">
<div id="more-heading">More to explore</div>
<div id="moreResults" class="grid grid-cols-2 md:grid-cols-4 gap-x-5 gap-y-10"></div>
</div>
<div id="no-results">
<div class="big">No Huggies match that</div>
<div>Try a simpler word, an emotion, an object, or pick a chip above.</div>
</div>
<div id="browse">
<section id="HFlogos" class="mb-28">
<div class="flex flex-row items-center justify-between">
<div class="font-mono max-w-fit text-3xl bg-blue-500 text-white mb-5 py-3 px-6 rounded-full">HF Logos</div>
<div class="brand-link">
<a href="https://huggingface.co/brand" target="_blank">View official HF branding guideline <svg xmlns="http://www.w3.org/2000/svg" class="inline w-6 h-6" width="32" height="32" viewBox="0 0 20 20"><path fill="currentColor" d="M9.516 6a.5.5 0 0 0 0 1h2.777l-4.147 4.146a.5.5 0 0 0 .708.708L13 7.707v2.777a.5.5 0 0 0 1 0V6.5a.5.5 0 0 0-.5-.5zm3.25 11a2.5 2.5 0 0 0 2.47-2.11A2.501 2.501 0 0 0 17 12.5v-7A2.5 2.5 0 0 0 14.5 3h-7a2.501 2.501 0 0 0-2.4 1.797A2.5 2.5 0 0 0 3 7.266V13.5A3.5 3.5 0 0 0 6.5 17zM4 7.266A1.5 1.5 0 0 1 5 5.85v6.65A2.5 2.5 0 0 0 7.5 15h6.68a1.5 1.5 0 0 1-1.414 1H6.5A2.5 2.5 0 0 1 4 13.5zM7.5 4h7A1.5 1.5 0 0 1 16 5.5v7a1.5 1.5 0 0 1-1.5 1.5h-7A1.5 1.5 0 0 1 6 12.5v-7A1.5 1.5 0 0 1 7.5 4"/></svg></a>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-x-5 gap-y-10 card-grid">
<div class="w-full flex flex-col" data-id="logo__hf-logo">
<img src="images/Brand Logos/Hugging Face.png" alt="HF Logo" class="w-full h-full bg-white shadow-DropShadow md:p-14 p-7 rounded-3xl object-contain">
<div class="pl-3 pt-3">
<h5 class="text-lg asset-name">HF Logo</h5>
<div class="flex flex-wrap gap-y-1 items-center mt-2 text-sm">
<button x-data="{ filename: 'Hugging Face.png', imageUrl: 'images/Brand Logos/Hugging Face.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4" alt="">
<p class="text-gray-500 font-mono">.png</p>
</button>
<hr class="mx-3 h-3 rounded-sm border-r border-IconBorder xl:mx-2.5">
<button x-data="{ filename: 'hf-logo.svg', imageUrl: 'images/Brand Logos/hf-logo.svg' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4" alt="">
<p class="text-gray-500 font-mono">.svg</p>
</button>
<hr class="mx-3 h-3 rounded-sm border-r border-IconBorder xl:mx-2.5">
<button x-data="{ filename: 'hf-logo.ai', imageUrl: 'images/Brand Logos/hf-logo.ai' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4" alt="">
<p class="text-gray-500 font-mono">.ai</p>
</button>
</div>
</div>
</div>
<div class="w-full flex flex-col" data-id="logo__rainbow">
<img src="images/Brand Logos/Rainbow Hugging Face.png" alt="Rainbow Hugging Face" class="w-full h-full bg-white shadow-DropShadow md:p-14 p-7 rounded-3xl object-contain">
<div class="pl-3 pt-3">
<h5 class="text-lg asset-name">Rainbow Hugging Face</h5>
<div class="flex flex-wrap gap-y-1 items-center mt-2 text-sm">
<button x-data="{ filename: 'Rainbow Hugging Face.png', imageUrl: 'images/Brand Logos/Rainbow Hugging Face.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4" alt="">
<p class="text-gray-500 font-mono">.png</p>
</button>
<hr class="mx-3 h-3 rounded-sm border-r border-IconBorder xl:mx-2.5">
<button x-data="{ filename: 'Rainbow Hugging Face.svg', imageUrl: 'images/Brand Logos/Rainbow Hugging Face.svg' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4" alt="">
<p class="text-gray-500 font-mono">.svg</p>
</button>
</div>
</div>
</div>
<div class="w-full flex flex-col" data-id="logo__title">
<img src="images/Brand Logos/hf-logo-with-title.png" alt="HF logo + title" class="w-full h-full bg-white shadow-DropShadow md:p-14 p-7 rounded-3xl object-contain">
<div class="pl-3 pt-3">
<h5 class="text-lg asset-name">HF logo + title</h5>
<div class="flex flex-wrap gap-y-1 items-center mt-2 text-sm">
<button x-data="{ filename: 'hf-logo-with-title.png', imageUrl: 'images/Brand Logos/hf-logo-with-title.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4" alt="">
<p class="text-gray-500 font-mono">.png</p>
</button>
<hr class="mx-3 h-3 rounded-sm border-r border-IconBorder xl:mx-2.5">
<button x-data="{ filename: 'hf-logo-with-title.svg', imageUrl: 'images/Brand Logos/hf-logo-with-title.svg' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4" alt="">
<p class="text-gray-500 font-mono">.svg</p>
</button>
<hr class="mx-3 h-3 rounded-sm border-r border-IconBorder xl:mx-2.5">
<button x-data="{ filename: 'hf-logo-with-title.ai', imageUrl: 'images/Brand Logos/hf-logo-with-title.ai' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4" alt="">
<p class="text-gray-500 font-mono">.ai</p>
</button>
</div>
</div>
</div>
<div class="w-full flex flex-col" data-id="logo__white-title">
<img src="images/Brand Logos/hf-logo-with-white-title.png" alt="HF logo + white title" class="w-full h-full bg-black shadow-DropShadow md:p-14 p-7 rounded-3xl object-contain">
<div class="pl-3 pt-3">
<h5 class="text-lg asset-name">HF logo + white title</h5>
<div class="flex flex-wrap gap-y-1 items-center mt-2 text-sm">
<button x-data="{ filename: 'hf-logo-with-white-title.png', imageUrl: 'images/Brand Logos/hf-logo-with-white-title.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4" alt="">
<p class="text-gray-500 font-mono">.png</p>
</button>
<hr class="mx-3 h-3 rounded-sm border-r border-IconBorder xl:mx-2.5">
<button x-data="{ filename: 'hf-logo-with-white-title.svg', imageUrl: 'images/Brand Logos/hf-logo-with-white-title.svg' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4" alt="">
<p class="text-gray-500 font-mono">.svg</p>
</button>
<hr class="mx-3 h-3 rounded-sm border-r border-IconBorder xl:mx-2.5">
<button x-data="{ filename: 'hf-logo-with-white-title.ai', imageUrl: 'images/Brand Logos/hf-logo-with-white-title.ai' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4" alt="">
<p class="text-gray-500 font-mono">.ai</p>
</button>
</div>
</div>
</div>
</div>
</section>
<section id="ModernHuggies" class="mb-28">
<div class="flex items-center mb-5">
<div class="font-mono max-w-fit text-3xl bg-blue-500 text-white py-3 px-6 rounded-full">Modern Huggies</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-x-5 gap-y-10 card-grid" style="grid-auto-flow: dense">
<div class="w-full flex flex-col col-span-2 row-span-2 hero-left" data-id="collection-2026__huguma" data-display-name="Huguma" data-tags="huguma daruma japanese lucky red pop art halftone mascot おみくじ">
<img src="images/Huggy Collection 2026/Huguma.png" alt="Huguma" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Huguma</h5>
<button x-data="{ filename: 'Huguma.png', imageUrl: 'images/Huggy Collection 2026/Huguma.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__spock-huggy" data-display-name="Spock Huggy" data-tags="spock star trek vulcan salute science officer starfleet blue">
<img src="images/Huggy Collection 2026/Spock Huggy.png" alt="Spock Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Spock Huggy</h5>
<button x-data="{ filename: 'Spock Huggy.png', imageUrl: 'images/Huggy Collection 2026/Spock Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__scanner-huggy" data-display-name="Scanner Huggy" data-tags="discovery scanner tricorder explore science planet scan star trek">
<img src="images/Huggy Collection 2026/Scanner Huggy.png" alt="Scanner Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Scanner Huggy</h5>
<button x-data="{ filename: 'Scanner Huggy.png', imageUrl: 'images/Huggy Collection 2026/Scanner Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__protostar-huggy" data-display-name="ProtoStar Huggy" data-tags="protostar planet ring star space cosmic saturn orbit">
<img src="images/Huggy Collection 2026/ProtoStar Huggy.png" alt="ProtoStar Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">ProtoStar Huggy</h5>
<button x-data="{ filename: 'ProtoStar Huggy.png', imageUrl: 'images/Huggy Collection 2026/ProtoStar Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col col-span-2 row-span-2 hero-right" data-id="collection-2026__doodle-huggy" data-display-name="Doodle Huggy" data-tags="doodle">
<img src="images/Huggy Collection 2026/Doodle Huggy.gif" alt="Doodle Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Doodle Huggy</h5>
<button x-data="{ filename: 'Doodle Huggy.gif', imageUrl: 'images/Huggy Collection 2026/Doodle Huggy.gif' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.gif</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__acedemic-huggy" data-display-name="Acedemic Huggy" data-tags="acedemic">
<img src="images/Huggy Collection 2026/Acedemic Huggy.png" alt="Acedemic Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Acedemic Huggy</h5>
<button x-data="{ filename: 'Acedemic Huggy.png', imageUrl: 'images/Huggy Collection 2026/Acedemic Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__guide-huggy" data-display-name="Agent Huggy" data-tags="agent">
<img src="images/Huggy Collection 2026/Agent Huggy.png" alt="Agent Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Agent Huggy</h5>
<button x-data="{ filename: 'Agent Huggy.png', imageUrl: 'images/Huggy Collection 2026/Agent Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__monopoly-huggy" data-display-name="Assistant Huggy" data-tags="assistant">
<img src="images/Huggy Collection 2026/Assistant Huggy.png" alt="Assistant Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Assistant Huggy</h5>
<button x-data="{ filename: 'Assistant Huggy.png', imageUrl: 'images/Huggy Collection 2026/Assistant Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__athlete-frowning-huggy" data-display-name="Athlete Huggy" data-tags="athlete">
<img src="images/Huggy Collection 2026/Athlete Huggy.png" alt="Athlete Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Athlete Huggy</h5>
<button x-data="{ filename: 'Athlete Huggy.png', imageUrl: 'images/Huggy Collection 2026/Athlete Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__baguette-violinist-huggy" data-display-name="Baguette Violinist Huggy" data-tags="baguette violinist">
<img src="images/Huggy Collection 2026/Baguette Violinist Huggy.png" alt="Baguette Violinist Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Baguette Violinist Huggy</h5>
<button x-data="{ filename: 'Baguette Violinist Huggy.png', imageUrl: 'images/Huggy Collection 2026/Baguette Violinist Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__care-for-openclaw" data-display-name="Care for OpenClaw" data-tags="openclaw lobster molty care hug love support crossover red lobster">
<img src="images/Huggy Collection 2026/Care for OpenClaw.png" alt="Care for OpenClaw" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Care for OpenClaw</h5>
<button x-data="{ filename: 'Care for OpenClaw.png', imageUrl: 'images/Huggy Collection 2026/Care for OpenClaw.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__huggy-chef" data-display-name="Chef Huggy" data-tags="chef">
<img src="images/Huggy Collection 2026/Chef Huggy.png" alt="Chef Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Chef Huggy</h5>
<button x-data="{ filename: 'Chef Huggy.png', imageUrl: 'images/Huggy Collection 2026/Chef Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__computer-vision-huggy" data-display-name="computer vision Huggy" data-tags="computer vision">
<img src="images/Huggy Collection 2026/computer vision Huggy.png" alt="computer vision Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">computer vision Huggy</h5>
<button x-data="{ filename: 'computer vision Huggy.png', imageUrl: 'images/Huggy Collection 2026/computer vision Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__cool-huggy" data-display-name="Cool Huggy" data-tags="cool">
<img src="images/Huggy Collection 2026/Cool Huggy.png" alt="Cool Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Cool Huggy</h5>
<button x-data="{ filename: 'Cool Huggy.png', imageUrl: 'images/Huggy Collection 2026/Cool Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col col-span-2 row-span-2 hero-left" data-id="collection-2026__dragon-huggy" data-display-name="Dragon Huggy" data-tags="dragon">
<img src="images/Huggy Collection 2026/Dragon Huggy.png" alt="Dragon Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Dragon Huggy</h5>
<button x-data="{ filename: 'Dragon Huggy.png', imageUrl: 'images/Huggy Collection 2026/Dragon Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__cowboy-huggy" data-display-name="Cowboy Huggy" data-tags="cowboy">
<img src="images/Huggy Collection 2026/Cowboy Huggy.png" alt="Cowboy Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Cowboy Huggy</h5>
<button x-data="{ filename: 'Cowboy Huggy.png', imageUrl: 'images/Huggy Collection 2026/Cowboy Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__d-huggy">
<img src="images/Huggy Collection 2026/D Huggy.png" alt="D Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">D Huggy</h5>
<button x-data="{ filename: 'D Huggy.png', imageUrl: 'images/Huggy Collection 2026/D Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__dancing-huggy" data-display-name="Dancing Huggy" data-tags="dancing">
<img src="images/Huggy Collection 2026/Dancing Huggy.png" alt="Dancing Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Dancing Huggy</h5>
<button x-data="{ filename: 'Dancing Huggy.png', imageUrl: 'images/Huggy Collection 2026/Dancing Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__growing-model-huggy-2" data-display-name="Discover Dataset Huggy" data-tags="discover dataset">
<img src="images/Huggy Collection 2026/Discover Dataset Huggy.png" alt="Discover Dataset Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Discover Dataset Huggy</h5>
<button x-data="{ filename: 'Discover Dataset Huggy.png', imageUrl: 'images/Huggy Collection 2026/Discover Dataset Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__growing-model-huggy" data-display-name="Discovery Huggy" data-tags="discovery">
<img src="images/Huggy Collection 2026/Discovery Huggy.png" alt="Discovery Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Discovery Huggy</h5>
<button x-data="{ filename: 'Discovery Huggy.png', imageUrl: 'images/Huggy Collection 2026/Discovery Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__dj-huggy" data-display-name="DJ Huggy" data-tags="dj">
<img src="images/Huggy Collection 2026/DJ Huggy.png" alt="DJ Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">DJ Huggy</h5>
<button x-data="{ filename: 'DJ Huggy.png', imageUrl: 'images/Huggy Collection 2026/DJ Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__double-thumbs-up-huggy" data-display-name="Double Thumbs Up Huggy" data-tags="double thumbs up">
<img src="images/Huggy Collection 2026/Double Thumbs Up Huggy.png" alt="Double Thumbs Up Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Double Thumbs Up Huggy</h5>
<button x-data="{ filename: 'Double Thumbs Up Huggy.png', imageUrl: 'images/Huggy Collection 2026/Double Thumbs Up Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__dancing-huggy-3" data-display-name="Emotional Huggy" data-tags="emotional">
<img src="images/Huggy Collection 2026/Emotional Huggy.png" alt="Emotional Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Emotional Huggy</h5>
<button x-data="{ filename: 'Emotional Huggy.png', imageUrl: 'images/Huggy Collection 2026/Emotional Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__huggy-lab-2" data-display-name="Family Huggy" data-tags="family">
<img src="images/Huggy Collection 2026/Family Huggy.png" alt="Family Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Family Huggy</h5>
<button x-data="{ filename: 'Family Huggy.png', imageUrl: 'images/Huggy Collection 2026/Family Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col col-span-2 row-span-2 hero-right" data-id="collection-2026__huggy-pop" data-display-name="Huggy Pop" data-tags="pop">
<img src="images/Huggy Collection 2026/Huggy Pop.gif" alt="Huggy Pop" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Huggy Pop</h5>
<button x-data="{ filename: 'Huggy Pop.gif', imageUrl: 'images/Huggy Collection 2026/Huggy Pop.gif' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.gif</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__frustrated-huggy" data-display-name="Frustrated Huggy" data-tags="frustrated">
<img src="images/Huggy Collection 2026/Frustrated Huggy.png" alt="Frustrated Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Frustrated Huggy</h5>
<button x-data="{ filename: 'Frustrated Huggy.png', imageUrl: 'images/Huggy Collection 2026/Frustrated Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__game-jam-huggy" data-display-name="Game Jam Huggy" data-tags="game jam">
<img src="images/Huggy Collection 2026/Game Jam Huggy.png" alt="Game Jam Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Game Jam Huggy</h5>
<button x-data="{ filename: 'Game Jam Huggy.png', imageUrl: 'images/Huggy Collection 2026/Game Jam Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__gaming-huggy" data-display-name="Gaming Huggy" data-tags="gaming">
<img src="images/Huggy Collection 2026/Gaming Huggy.png" alt="Gaming Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Gaming Huggy</h5>
<button x-data="{ filename: 'Gaming Huggy.png', imageUrl: 'images/Huggy Collection 2026/Gaming Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__global-huggy" data-display-name="Global Huggy" data-tags="global">
<img src="images/Huggy Collection 2026/Global Huggy.png" alt="Global Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Global Huggy</h5>
<button x-data="{ filename: 'Global Huggy.png', imageUrl: 'images/Huggy Collection 2026/Global Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__gpu-huggy" data-display-name="GPU Huggy" data-tags="gpu">
<img src="images/Huggy Collection 2026/GPU Huggy.png" alt="GPU Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">GPU Huggy</h5>
<button x-data="{ filename: 'GPU Huggy.png', imageUrl: 'images/Huggy Collection 2026/GPU Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__growing-model-huggy-3" data-display-name="Growing model Huggy" data-tags="growing model">
<img src="images/Huggy Collection 2026/Growing model Huggy.png" alt="Growing model Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Growing model Huggy</h5>
<button x-data="{ filename: 'Growing model Huggy.png', imageUrl: 'images/Huggy Collection 2026/Growing model Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__headphones-huggy" data-display-name="Headphones Huggy" data-tags="headphones">
<img src="images/Huggy Collection 2026/Headphones Huggy.png" alt="Headphones Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Headphones Huggy</h5>
<button x-data="{ filename: 'Headphones Huggy.png', imageUrl: 'images/Huggy Collection 2026/Headphones Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__horse-huggy" data-display-name="Horse Huggy" data-tags="horse">
<img src="images/Huggy Collection 2026/Horse Huggy.png" alt="Horse Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Horse Huggy</h5>
<button x-data="{ filename: 'Horse Huggy.png', imageUrl: 'images/Huggy Collection 2026/Horse Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__huggy-approved" data-display-name="Huggy Approved" data-tags="approved">
<img src="images/Huggy Collection 2026/Huggy Approved.png" alt="Huggy Approved" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Huggy Approved</h5>
<button x-data="{ filename: 'Huggy Approved.png', imageUrl: 'images/Huggy Collection 2026/Huggy Approved.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col col-span-2 row-span-2 hero-left" data-id="collection-2026__super-huggy" data-display-name="Super Huggy" data-tags="super">
<img src="images/Huggy Collection 2026/Super Huggy.png" alt="Super Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Super Huggy</h5>
<button x-data="{ filename: 'Super Huggy.png', imageUrl: 'images/Huggy Collection 2026/Super Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__yelling-huggy" data-display-name="Huggy Chad" data-tags="chad">
<img src="images/Huggy Collection 2026/Huggy Chad.png" alt="Huggy Chad" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Huggy Chad</h5>
<button x-data="{ filename: 'Huggy Chad.png', imageUrl: 'images/Huggy Collection 2026/Huggy Chad.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__huggy-hi" data-display-name="Huggy Hi" data-tags="hi">
<img src="images/Huggy Collection 2026/Huggy Hi.png" alt="Huggy Hi" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Huggy Hi</h5>
<button x-data="{ filename: 'Huggy Hi.png', imageUrl: 'images/Huggy Collection 2026/Huggy Hi.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__huggy-lawyer" data-display-name="Huggy Lawyer" data-tags="lawyer">
<img src="images/Huggy Collection 2026/Huggy Lawyer.png" alt="Huggy Lawyer" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Huggy Lawyer</h5>
<button x-data="{ filename: 'Huggy Lawyer.png', imageUrl: 'images/Huggy Collection 2026/Huggy Lawyer.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__huggy-loves-openclaw" data-display-name="Huggy Loves OpenClaw" data-tags="openclaw lobster molty love hug cuddle heart crossover red lobster">
<img src="images/Huggy Collection 2026/Huggy Loves OpenClaw.png" alt="Huggy Loves OpenClaw" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Huggy Loves OpenClaw</h5>
<button x-data="{ filename: 'Huggy Loves OpenClaw.png', imageUrl: 'images/Huggy Collection 2026/Huggy Loves OpenClaw.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__huggy-medic" data-display-name="Huggy Medic" data-tags="medic">
<img src="images/Huggy Collection 2026/Huggy Medic.png" alt="Huggy Medic" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Huggy Medic</h5>
<button x-data="{ filename: 'Huggy Medic.png', imageUrl: 'images/Huggy Collection 2026/Huggy Medic.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__huggy-sunny-hello" data-display-name="Huggy Sunny hello" data-tags="sunny hello">
<img src="images/Huggy Collection 2026/Huggy Sunny hello.png" alt="Huggy Sunny hello" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Huggy Sunny hello</h5>
<button x-data="{ filename: 'Huggy Sunny hello.png', imageUrl: 'images/Huggy Collection 2026/Huggy Sunny hello.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__huggy-sunny" data-display-name="Huggy Sunny" data-tags="sunny">
<img src="images/Huggy Collection 2026/Huggy Sunny.png" alt="Huggy Sunny" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Huggy Sunny</h5>
<button x-data="{ filename: 'Huggy Sunny.png', imageUrl: 'images/Huggy Collection 2026/Huggy Sunny.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__huggy-the-pooh-meme" data-display-name="Huggy the Pooh meme" data-tags="pooh meme">
<img src="images/Huggy Collection 2026/Huggy the Pooh meme.png" alt="Huggy the Pooh meme" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Huggy the Pooh meme</h5>
<button x-data="{ filename: 'Huggy the Pooh meme.png', imageUrl: 'images/Huggy Collection 2026/Huggy the Pooh meme.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__huggy-yolk" data-display-name="Huggy Yolk" data-tags="yolk">
<img src="images/Huggy Collection 2026/Huggy Yolk.png" alt="Huggy Yolk" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Huggy Yolk</h5>
<button x-data="{ filename: 'Huggy Yolk.png', imageUrl: 'images/Huggy Collection 2026/Huggy Yolk.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col col-span-2 row-span-2 hero-right" data-id="collection-2026__vibing-huggy" data-display-name="Vibing Huggy" data-tags="vibing">
<img src="images/Huggy Collection 2026/Vibing Huggy.gif" alt="Vibing Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Vibing Huggy</h5>
<button x-data="{ filename: 'Vibing Huggy.gif', imageUrl: 'images/Huggy Collection 2026/Vibing Huggy.gif' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.gif</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__judge-huggy" data-display-name="Judge Huggy" data-tags="judge">
<img src="images/Huggy Collection 2026/Judge Huggy.png" alt="Judge Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Judge Huggy</h5>
<button x-data="{ filename: 'Judge Huggy.png', imageUrl: 'images/Huggy Collection 2026/Judge Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__karaoke-huggy" data-display-name="Karaoke Huggy" data-tags="karaoke">
<img src="images/Huggy Collection 2026/Karaoke Huggy.png" alt="Karaoke Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Karaoke Huggy</h5>
<button x-data="{ filename: 'Karaoke Huggy.png', imageUrl: 'images/Huggy Collection 2026/Karaoke Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__huggy-lab" data-display-name="Lab Huggy" data-tags="lab">
<img src="images/Huggy Collection 2026/Lab Huggy.png" alt="Lab Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Lab Huggy</h5>
<button x-data="{ filename: 'Lab Huggy.png', imageUrl: 'images/Huggy Collection 2026/Lab Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__karaoke-huggy-3" data-display-name="Leaning Huggy" data-tags="leaning">
<img src="images/Huggy Collection 2026/Leaning Huggy.png" alt="Leaning Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Leaning Huggy</h5>
<button x-data="{ filename: 'Leaning Huggy.png', imageUrl: 'images/Huggy Collection 2026/Leaning Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__star-eyes-wave-huggy" data-display-name="Learning Excited Huggy" data-tags="learning excited">
<img src="images/Huggy Collection 2026/Learning Excited Huggy.png" alt="Learning Excited Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Learning Excited Huggy</h5>
<button x-data="{ filename: 'Learning Excited Huggy.png', imageUrl: 'images/Huggy Collection 2026/Learning Excited Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__guide-huggy-2" data-display-name="Measure Huggy" data-tags="measure">
<img src="images/Huggy Collection 2026/Measure Huggy.png" alt="Measure Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Measure Huggy</h5>
<button x-data="{ filename: 'Measure Huggy.png', imageUrl: 'images/Huggy Collection 2026/Measure Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__smiling-huggy" data-display-name="Nervous Huggy" data-tags="nervous">
<img src="images/Huggy Collection 2026/Nervous Huggy.png" alt="Nervous Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Nervous Huggy</h5>
<button x-data="{ filename: 'Nervous Huggy.png', imageUrl: 'images/Huggy Collection 2026/Nervous Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__default-huggy" data-display-name="OG Huggy" data-tags="og">
<img src="images/Huggy Collection 2026/OG Huggy.png" alt="OG Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">OG Huggy</h5>
<button x-data="{ filename: 'OG Huggy.png', imageUrl: 'images/Huggy Collection 2026/OG Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__peeking-huggy" data-display-name="Peeking Huggy" data-tags="peeking">
<img src="images/Huggy Collection 2026/Peeking Huggy.png" alt="Peeking Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Peeking Huggy</h5>
<button x-data="{ filename: 'Peeking Huggy.png', imageUrl: 'images/Huggy Collection 2026/Peeking Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col col-span-2 row-span-2 hero-left" data-id="collection-2026__viking-huggy" data-display-name="Viking Huggy" data-tags="viking">
<img src="images/Huggy Collection 2026/Viking Huggy.png" alt="Viking Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Viking Huggy</h5>
<button x-data="{ filename: 'Viking Huggy.png', imageUrl: 'images/Huggy Collection 2026/Viking Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__breathing-huggy" data-display-name="Running Huggy" data-tags="running">
<img src="images/Huggy Collection 2026/Running Huggy.png" alt="Running Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Running Huggy</h5>
<button x-data="{ filename: 'Running Huggy.png', imageUrl: 'images/Huggy Collection 2026/Running Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__rushing-huggy" data-display-name="Rushing Blinking Huggy" data-tags="rushing blinking">
<img src="images/Huggy Collection 2026/Rushing Blinking Huggy.png" alt="Rushing Blinking Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Rushing Blinking Huggy</h5>
<button x-data="{ filename: 'Rushing Blinking Huggy.png', imageUrl: 'images/Huggy Collection 2026/Rushing Blinking Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__cowboy-wizard-huggy" data-display-name="Secret Huggy" data-tags="secret">
<img src="images/Huggy Collection 2026/Secret Huggy.png" alt="Secret Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Secret Huggy</h5>
<button x-data="{ filename: 'Secret Huggy.png', imageUrl: 'images/Huggy Collection 2026/Secret Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__smug-huggy" data-display-name="Smug Huggy" data-tags="smug">
<img src="images/Huggy Collection 2026/Smug Huggy.png" alt="Smug Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Smug Huggy</h5>
<button x-data="{ filename: 'Smug Huggy.png', imageUrl: 'images/Huggy Collection 2026/Smug Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__snake-huggy" data-display-name="Snake Huggy" data-tags="snake">
<img src="images/Huggy Collection 2026/Snake Huggy.png" alt="Snake Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Snake Huggy</h5>
<button x-data="{ filename: 'Snake Huggy.png', imageUrl: 'images/Huggy Collection 2026/Snake Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__sprouting-huggy" data-display-name="Sprouting Huggy" data-tags="sprouting">
<img src="images/Huggy Collection 2026/Sprouting Huggy.png" alt="Sprouting Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Sprouting Huggy</h5>
<button x-data="{ filename: 'Sprouting Huggy.png', imageUrl: 'images/Huggy Collection 2026/Sprouting Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__starry-eyes-huggy" data-display-name="Super Excited Huggy" data-tags="super excited">
<img src="images/Huggy Collection 2026/Super Excited Huggy.png" alt="Super Excited Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Super Excited Huggy</h5>
<button x-data="{ filename: 'Super Excited Huggy.png', imageUrl: 'images/Huggy Collection 2026/Super Excited Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__text-generation-wizard-huggy" data-display-name="Text Generation Wizard Huggy" data-tags="text generation wizard">
<img src="images/Huggy Collection 2026/Text Generation Wizard Huggy.png" alt="Text Generation Wizard Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Text Generation Wizard Huggy</h5>
<button x-data="{ filename: 'Text Generation Wizard Huggy.png', imageUrl: 'images/Huggy Collection 2026/Text Generation Wizard Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__tiptoe-huggy" data-display-name="Tiptoe Huggy" data-tags="tiptoe">
<img src="images/Huggy Collection 2026/Tiptoe Huggy.png" alt="Tiptoe Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Tiptoe Huggy</h5>
<button x-data="{ filename: 'Tiptoe Huggy.png', imageUrl: 'images/Huggy Collection 2026/Tiptoe Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__transformer-agent-huggy" data-display-name="Transformer Agent Huggy" data-tags="transformer agent">
<img src="images/Huggy Collection 2026/Transformer Agent Huggy.png" alt="Transformer Agent Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Transformer Agent Huggy</h5>
<button x-data="{ filename: 'Transformer Agent Huggy.png', imageUrl: 'images/Huggy Collection 2026/Transformer Agent Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__boxing-huggy" data-display-name="Video Huggy" data-tags="video">
<img src="images/Huggy Collection 2026/Video Huggy.png" alt="Video Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Video Huggy</h5>
<button x-data="{ filename: 'Video Huggy.png', imageUrl: 'images/Huggy Collection 2026/Video Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__whistle-huggy" data-display-name="Whistle Huggy" data-tags="whistle">
<img src="images/Huggy Collection 2026/Whistle Huggy.png" alt="Whistle Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Whistle Huggy</h5>
<button x-data="{ filename: 'Whistle Huggy.png', imageUrl: 'images/Huggy Collection 2026/Whistle Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="collection-2026__wine-huggy" data-display-name="Wine Huggy" data-tags="wine">
<img src="images/Huggy Collection 2026/Wine Huggy.png" alt="Wine Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Wine Huggy</h5>
<button x-data="{ filename: 'Wine Huggy.png', imageUrl: 'images/Huggy Collection 2026/Wine Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="modern__huggy-blink-okay" data-display-name="Huggy blink Okay" data-tags="blink okay">
<img src="images/modern Huggies/Huggy blink Okay.png" alt="Huggy blink Okay" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Huggy blink Okay</h5>
<button x-data="{ filename: 'Huggy blink Okay.png', imageUrl: 'images/modern Huggies/Huggy blink Okay.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="modern__lora-huggy" data-display-name="Lora Huggy" data-tags="lora">
<img src="images/modern Huggies/Lora Huggy.png" alt="Lora Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Lora Huggy</h5>
<button x-data="{ filename: 'Lora Huggy.png', imageUrl: 'images/modern Huggies/Lora Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="modern__optimum-huggy" data-display-name="Optimum Huggy" data-tags="optimum">
<img src="images/modern Huggies/Optimum Huggy.png" alt="Optimum Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Optimum Huggy</h5>
<button x-data="{ filename: 'Optimum Huggy.png', imageUrl: 'images/modern Huggies/Optimum Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="modern__robot-huggy" data-display-name="Robot Huggy" data-tags="robot">
<img src="images/modern Huggies/Robot Huggy.png" alt="Robot Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Robot Huggy</h5>
<button x-data="{ filename: 'Robot Huggy.png', imageUrl: 'images/modern Huggies/Robot Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
</div>
</section>
<section id="OutlinedHuggies" class="mb-28">
<div class="flex items-center mb-5">
<div class="font-mono max-w-fit text-3xl bg-blue-500 text-white py-3 px-6 rounded-full">Outlined Huggies</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-x-5 gap-y-10 card-grid">
<div class="w-full flex flex-col" data-id="outlined__catching-huggy" data-display-name="Catching Huggy" data-tags="catching">
<img src="images/Outlined Huggies/Catching Huggy.png" alt="Catching Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Catching Huggy</h5>
<button x-data="{ filename: 'Catching Huggy.png', imageUrl: 'images/Outlined Huggies/Catching Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__comic-huggy" data-display-name="Comic Huggy" data-tags="comic">
<img src="images/Outlined Huggies/Comic Huggy.png" alt="Comic Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Comic Huggy</h5>
<button x-data="{ filename: 'Comic Huggy.png', imageUrl: 'images/Outlined Huggies/Comic Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__curious-huggy" data-display-name="Curious Huggy" data-tags="curious">
<img src="images/Outlined Huggies/Curious Huggy.png" alt="Curious Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Curious Huggy</h5>
<button x-data="{ filename: 'Curious Huggy.png', imageUrl: 'images/Outlined Huggies/Curious Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__diffusor-guide-huggy" data-display-name="Diffusor guide Huggy" data-tags="diffusor guide">
<img src="images/Outlined Huggies/Diffusor guide Huggy.png" alt="Diffusor guide Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Diffusor guide Huggy</h5>
<button x-data="{ filename: 'Diffusor guide Huggy.png', imageUrl: 'images/Outlined Huggies/Diffusor guide Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__fishing-huggy" data-display-name="Fishing Huggy" data-tags="fishing">
<img src="images/Outlined Huggies/Fishing Huggy.png" alt="Fishing Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Fishing Huggy</h5>
<button x-data="{ filename: 'Fishing Huggy.png', imageUrl: 'images/Outlined Huggies/Fishing Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__global-huggy" data-display-name="Global Huggy" data-tags="global">
<img src="images/Outlined Huggies/Global Huggy.png" alt="Global Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Global Huggy</h5>
<button x-data="{ filename: 'Global Huggy.png', imageUrl: 'images/Outlined Huggies/Global Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__gpu-huggy" data-display-name="GPU Huggy" data-tags="gpu">
<img src="images/Outlined Huggies/GPU Huggy.png" alt="GPU Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">GPU Huggy</h5>
<button x-data="{ filename: 'GPU Huggy.png', imageUrl: 'images/Outlined Huggies/GPU Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__greeting-huggy-left" data-display-name="Greeting Huggy left" data-tags="greeting left">
<img src="images/Outlined Huggies/Greeting Huggy left.png" alt="Greeting Huggy left" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Greeting Huggy left</h5>
<button x-data="{ filename: 'Greeting Huggy left.png', imageUrl: 'images/Outlined Huggies/Greeting Huggy left.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__greeting-huggy-right" data-display-name="Greeting Huggy right" data-tags="greeting right">
<img src="images/Outlined Huggies/Greeting Huggy right.png" alt="Greeting Huggy right" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Greeting Huggy right</h5>
<button x-data="{ filename: 'Greeting Huggy right.png', imageUrl: 'images/Outlined Huggies/Greeting Huggy right.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__growing-model-huggy" data-display-name="Growing model Huggy" data-tags="growing model">
<img src="images/Outlined Huggies/Growing model Huggy.png" alt="Growing model Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Growing model Huggy</h5>
<button x-data="{ filename: 'Growing model Huggy.png', imageUrl: 'images/Outlined Huggies/Growing model Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__guide-huggy" data-display-name="Guide Huggy" data-tags="guide">
<img src="images/Outlined Huggies/Guide Huggy.png" alt="Guide Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Guide Huggy</h5>
<button x-data="{ filename: 'Guide Huggy.png', imageUrl: 'images/Outlined Huggies/Guide Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__loving-modelndataset-huggy" data-display-name="Loving modelndataset Huggy" data-tags="loving modelndataset">
<img src="images/Outlined Huggies/Loving modelndataset Huggy.png" alt="Loving modelndataset Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Loving modelndataset Huggy</h5>
<button x-data="{ filename: 'Loving modelndataset Huggy.png', imageUrl: 'images/Outlined Huggies/Loving modelndataset Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__manager-huggy" data-display-name="Manager Huggy" data-tags="manager">
<img src="images/Outlined Huggies/Manager Huggy.png" alt="Manager Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Manager Huggy</h5>
<button x-data="{ filename: 'Manager Huggy.png', imageUrl: 'images/Outlined Huggies/Manager Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__paper-huggy" data-display-name="Paper Huggy" data-tags="paper">
<img src="images/Outlined Huggies/Paper Huggy.png" alt="Paper Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Paper Huggy</h5>
<button x-data="{ filename: 'Paper Huggy.png', imageUrl: 'images/Outlined Huggies/Paper Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__rocket-huggy" data-display-name="Rocket Huggy" data-tags="rocket">
<img src="images/Outlined Huggies/Rocket Huggy.png" alt="Rocket Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Rocket Huggy</h5>
<button x-data="{ filename: 'Rocket Huggy.png', imageUrl: 'images/Outlined Huggies/Rocket Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__scan-huggy" data-display-name="Scan Huggy" data-tags="scan">
<img src="images/Outlined Huggies/Scan Huggy.png" alt="Scan Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Scan Huggy</h5>
<button x-data="{ filename: 'Scan Huggy.png', imageUrl: 'images/Outlined Huggies/Scan Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__violinist-huggy" data-display-name="Violinist Huggy" data-tags="violinist">
<img src="images/Outlined Huggies/Violinist Huggy.png" alt="Violinist Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">Violinist Huggy</h5>
<button x-data="{ filename: 'Violinist Huggy.png', imageUrl: 'images/Outlined Huggies/Violinist Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
<div class="w-full flex flex-col" data-id="outlined__x-ray-huggy" data-display-name="X-ray Huggy" data-tags="ray">
<img src="images/Outlined Huggies/X-ray Huggy.png" alt="X-ray Huggy" class="w-full h-full bg-white shadow-DropShadow md:p-7 p-3 rounded-3xl object-contain">
<div class="px-3 pt-3 flex flex-col gap-1 md:flex-row md:justify-between md:items-center">
<h5 class="text-lg asset-name">X-ray Huggy</h5>
<button x-data="{ filename: 'X-ray Huggy.png', imageUrl: 'images/Outlined Huggies/X-ray Huggy.png' }" x-on:click="downloadImage(imageUrl, filename)" class="flex items-center space-x-1 download-button">
<img src="images/download icon.svg" class="w-4 h-4 hidden md:inline-block" alt="">
<p class="text-gray-500 font-mono hidden md:inline-block">.png</p>
</button>
</div>
</div>
</div>
</section>
</div>
</div>
<div id="theme-toggle" role="group" aria-label="Color theme">
<button type="button" class="sw-motion" data-settheme="motion" title="Cream theme" aria-label="Cream theme"></button>
<button type="button" class="sw-bluish" data-settheme="bluish" title="Blue theme" aria-label="Blue theme"></button>
</div>
<script>
(function () {
var KNOWN = ['motion', 'bluish'];
var btns = document.querySelectorAll('#theme-toggle button');
function setActive(t) { btns.forEach(function (b) { b.classList.toggle('active', b.dataset.settheme === t); }); }
var cur = document.documentElement.getAttribute('data-theme');
if (KNOWN.indexOf(cur) < 0) cur = 'motion';
setActive(cur);
btns.forEach(function (b) {
b.addEventListener('click', function () {
var t = b.dataset.settheme;
document.documentElement.setAttribute('data-theme', t);
try { localStorage.setItem('hfba-theme', t); } catch (e) {}
setActive(t);
});
});
})();
</script>
<script id="search-index" type="application/json">[{"id":"modern__huggy-blink-okay","name":"Huggy blink Okay","section":"Modern Huggies","tags":["blink","okay"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Huggy blink Okay","file":"Huggy blink Okay.png"},{"id":"modern__lora-huggy","name":"Lora Huggy","section":"Modern Huggies","tags":["lora"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Lora Huggy","file":"Lora Huggy.png"},{"id":"modern__optimum-huggy","name":"Optimum Huggy","section":"Modern Huggies","tags":["optimum"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Optimum Huggy","file":"Optimum Huggy.png"},{"id":"modern__robot-huggy","name":"Robot Huggy","section":"Modern Huggies","tags":["robot"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Robot Huggy","file":"Robot Huggy.png"},{"id":"outlined__catching-huggy","name":"Catching Huggy","section":"Outlined Huggies","tags":["catching"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Catching Huggy","file":"Catching Huggy.png"},{"id":"outlined__comic-huggy","name":"Comic Huggy","section":"Outlined Huggies","tags":["comic"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Comic Huggy","file":"Comic Huggy.png"},{"id":"outlined__curious-huggy","name":"Curious Huggy","section":"Outlined Huggies","tags":["curious"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Curious Huggy","file":"Curious Huggy.png"},{"id":"outlined__diffusor-guide-huggy","name":"Diffusor guide Huggy","section":"Outlined Huggies","tags":["diffusor","guide"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Diffusor guide Huggy","file":"Diffusor guide Huggy.png"},{"id":"outlined__fishing-huggy","name":"Fishing Huggy","section":"Outlined Huggies","tags":["fishing"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Fishing Huggy","file":"Fishing Huggy.png"},{"id":"outlined__global-huggy","name":"Global Huggy","section":"Outlined Huggies","tags":["global"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Global Huggy","file":"Global Huggy.png"},{"id":"outlined__gpu-huggy","name":"GPU Huggy","section":"Outlined Huggies","tags":["gpu"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"GPU Huggy","file":"GPU Huggy.png"},{"id":"outlined__greeting-huggy-left","name":"Greeting Huggy left","section":"Outlined Huggies","tags":["greeting","left"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Greeting Huggy left","file":"Greeting Huggy left.png"},{"id":"outlined__greeting-huggy-right","name":"Greeting Huggy right","section":"Outlined Huggies","tags":["greeting","right"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Greeting Huggy right","file":"Greeting Huggy right.png"},{"id":"outlined__growing-model-huggy","name":"Growing model Huggy","section":"Outlined Huggies","tags":["growing","model"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Growing model Huggy","file":"Growing model Huggy.png"},{"id":"outlined__guide-huggy","name":"Guide Huggy","section":"Outlined Huggies","tags":["guide"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Guide Huggy","file":"Guide Huggy.png"},{"id":"outlined__loving-modelndataset-huggy","name":"Loving modelndataset Huggy","section":"Outlined Huggies","tags":["loving","modelndataset"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Loving modelndataset Huggy","file":"Loving modelndataset Huggy.png"},{"id":"outlined__manager-huggy","name":"Manager Huggy","section":"Outlined Huggies","tags":["manager"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Manager Huggy","file":"Manager Huggy.png"},{"id":"outlined__paper-huggy","name":"Paper Huggy","section":"Outlined Huggies","tags":["paper"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Paper Huggy","file":"Paper Huggy.png"},{"id":"outlined__rocket-huggy","name":"Rocket Huggy","section":"Outlined Huggies","tags":["rocket"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Rocket Huggy","file":"Rocket Huggy.png"},{"id":"outlined__scan-huggy","name":"Scan Huggy","section":"Outlined Huggies","tags":["scan"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Scan Huggy","file":"Scan Huggy.png"},{"id":"outlined__violinist-huggy","name":"Violinist Huggy","section":"Outlined Huggies","tags":["violinist"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Violinist Huggy","file":"Violinist Huggy.png"},{"id":"outlined__x-ray-huggy","name":"X-ray Huggy","section":"Outlined Huggies","tags":["ray"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"X-ray Huggy","file":"X-ray Huggy.png"},{"id":"collection-2026__acedemic-huggy","name":"Acedemic Huggy","section":"Modern Huggies","tags":["acedemic"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Acedemic Huggy","file":"Acedemic Huggy.png"},{"id":"collection-2026__breathing-huggy","name":"Running Huggy","section":"Modern Huggies","tags":["running"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Running Huggy","file":"Running Huggy.png"},{"id":"collection-2026__computer-vision-huggy","name":"computer vision Huggy","section":"Modern Huggies","tags":["computer","vision"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"computer vision Huggy","file":"computer vision Huggy.png"},{"id":"collection-2026__d-huggy","name":"D Huggy","section":"Modern Huggies","tags":[],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"D Huggy","file":"D Huggy.png"},{"id":"collection-2026__dancing-huggy","name":"Dancing Huggy","section":"Modern Huggies","tags":["dancing"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Dancing Huggy","file":"Dancing Huggy.png"},{"id":"collection-2026__dancing-huggy-3","name":"Emotional Huggy","section":"Modern Huggies","tags":["emotional"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Emotional Huggy","file":"Emotional Huggy.png"},{"id":"collection-2026__doodle-huggy","name":"Doodle Huggy","section":"Modern Huggies","tags":["doodle"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Doodle Huggy","file":"Doodle Huggy.gif"},{"id":"collection-2026__dragon-huggy","name":"Dragon Huggy","section":"Modern Huggies","tags":["dragon"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Dragon Huggy","file":"Dragon Huggy.png"},{"id":"collection-2026__boxing-huggy","name":"Video Huggy","section":"Modern Huggies","tags":["video"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Video Huggy","file":"Video Huggy.png"},{"id":"collection-2026__rushing-huggy","name":"Rushing Blinking Huggy","section":"Modern Huggies","tags":["rushing","blinking"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Rushing Blinking Huggy","file":"Rushing Blinking Huggy.png"},{"id":"collection-2026__athlete-frowning-huggy","name":"Athlete Huggy","section":"Modern Huggies","tags":["athlete"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Athlete Huggy","file":"Athlete Huggy.png"},{"id":"collection-2026__sprouting-huggy","name":"Sprouting Huggy","section":"Modern Huggies","tags":["sprouting"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Sprouting Huggy","file":"Sprouting Huggy.png"},{"id":"collection-2026__gaming-huggy","name":"Gaming Huggy","section":"Modern Huggies","tags":["gaming"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Gaming Huggy","file":"Gaming Huggy.png"},{"id":"collection-2026__peeking-huggy","name":"Peeking Huggy","section":"Modern Huggies","tags":["peeking"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Peeking Huggy","file":"Peeking Huggy.png"},{"id":"collection-2026__tiptoe-huggy","name":"Tiptoe Huggy","section":"Modern Huggies","tags":["tiptoe"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Tiptoe Huggy","file":"Tiptoe Huggy.png"},{"id":"collection-2026__game-jam-huggy","name":"Game Jam Huggy","section":"Modern Huggies","tags":["game","jam"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Game Jam Huggy","file":"Game Jam Huggy.png"},{"id":"collection-2026__global-huggy","name":"Global Huggy","section":"Modern Huggies","tags":["global"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Global Huggy","file":"Global Huggy.png"},{"id":"collection-2026__gpu-huggy","name":"GPU Huggy","section":"Modern Huggies","tags":["gpu"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"GPU Huggy","file":"GPU Huggy.png"},{"id":"collection-2026__growing-model-huggy","name":"Discovery Huggy","section":"Modern Huggies","tags":["discovery"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Discovery Huggy","file":"Discovery Huggy.png"},{"id":"collection-2026__growing-model-huggy-2","name":"Discover Dataset Huggy","section":"Modern Huggies","tags":["discover","dataset"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Discover Dataset Huggy","file":"Discover Dataset Huggy.png"},{"id":"collection-2026__growing-model-huggy-3","name":"Growing model Huggy","section":"Modern Huggies","tags":["growing","model"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Growing model Huggy","file":"Growing model Huggy.png"},{"id":"collection-2026__guide-huggy","name":"Agent Huggy","section":"Modern Huggies","tags":["agent"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Agent Huggy","file":"Agent Huggy.png"},{"id":"collection-2026__guide-huggy-2","name":"Measure Huggy","section":"Modern Huggies","tags":["measure"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Measure Huggy","file":"Measure Huggy.png"},{"id":"collection-2026__viking-huggy","name":"Viking Huggy","section":"Modern Huggies","tags":["viking"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Viking Huggy","file":"Viking Huggy.png"},{"id":"collection-2026__dj-huggy","name":"DJ Huggy","section":"Modern Huggies","tags":["dj"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"DJ Huggy","file":"DJ Huggy.png"},{"id":"collection-2026__horse-huggy","name":"Horse Huggy","section":"Modern Huggies","tags":["horse"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Horse Huggy","file":"Horse Huggy.png"},{"id":"collection-2026__huggy-chef","name":"Chef Huggy","section":"Modern Huggies","tags":["chef"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Chef Huggy","file":"Chef Huggy.png"},{"id":"collection-2026__huggy-hi","name":"Huggy Hi","section":"Modern Huggies","tags":["hi"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Huggy Hi","file":"Huggy Hi.png"},{"id":"collection-2026__huggy-lab","name":"Lab Huggy","section":"Modern Huggies","tags":["lab"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Lab Huggy","file":"Lab Huggy.png"},{"id":"collection-2026__huggy-lab-2","name":"Family Huggy","section":"Modern Huggies","tags":["family"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Family Huggy","file":"Family Huggy.png"},{"id":"collection-2026__monopoly-huggy","name":"Assistant Huggy","section":"Modern Huggies","tags":["assistant"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Assistant Huggy","file":"Assistant Huggy.png"},{"id":"collection-2026__huggy-lawyer","name":"Huggy Lawyer","section":"Modern Huggies","tags":["lawyer"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Huggy Lawyer","file":"Huggy Lawyer.png"},{"id":"collection-2026__judge-huggy","name":"Judge Huggy","section":"Modern Huggies","tags":["judge"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Judge Huggy","file":"Judge Huggy.png"},{"id":"collection-2026__baguette-violinist-huggy","name":"Baguette Violinist Huggy","section":"Modern Huggies","tags":["baguette","violinist"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Baguette Violinist Huggy","file":"Baguette Violinist Huggy.png"},{"id":"collection-2026__huggy-medic","name":"Huggy Medic","section":"Modern Huggies","tags":["medic"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Huggy Medic","file":"Huggy Medic.png"},{"id":"collection-2026__headphones-huggy","name":"Headphones Huggy","section":"Modern Huggies","tags":["headphones"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Headphones Huggy","file":"Headphones Huggy.png"},{"id":"collection-2026__whistle-huggy","name":"Whistle Huggy","section":"Modern Huggies","tags":["whistle"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Whistle Huggy","file":"Whistle Huggy.png"},{"id":"collection-2026__starry-eyes-huggy","name":"Super Excited Huggy","section":"Modern Huggies","tags":["super","excited"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Super Excited Huggy","file":"Super Excited Huggy.png"},{"id":"collection-2026__smiling-huggy","name":"Nervous Huggy","section":"Modern Huggies","tags":["nervous"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Nervous Huggy","file":"Nervous Huggy.png"},{"id":"collection-2026__frustrated-huggy","name":"Frustrated Huggy","section":"Modern Huggies","tags":["frustrated"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Frustrated Huggy","file":"Frustrated Huggy.png"},{"id":"collection-2026__yelling-huggy","name":"Huggy Chad","section":"Modern Huggies","tags":["chad"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Huggy Chad","file":"Huggy Chad.png"},{"id":"collection-2026__smug-huggy","name":"Smug Huggy","section":"Modern Huggies","tags":["smug"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Smug Huggy","file":"Smug Huggy.png"},{"id":"collection-2026__cool-huggy","name":"Cool Huggy","section":"Modern Huggies","tags":["cool"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Cool Huggy","file":"Cool Huggy.png"},{"id":"collection-2026__double-thumbs-up-huggy","name":"Double Thumbs Up Huggy","section":"Modern Huggies","tags":["double","thumbs","up"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Double Thumbs Up Huggy","file":"Double Thumbs Up Huggy.png"},{"id":"collection-2026__default-huggy","name":"OG Huggy","section":"Modern Huggies","tags":["og"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"OG Huggy","file":"OG Huggy.png"},{"id":"collection-2026__cowboy-huggy","name":"Cowboy Huggy","section":"Modern Huggies","tags":["cowboy"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Cowboy Huggy","file":"Cowboy Huggy.png"},{"id":"collection-2026__wine-huggy","name":"Wine Huggy","section":"Modern Huggies","tags":["wine"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Wine Huggy","file":"Wine Huggy.png"},{"id":"collection-2026__huggy-pop","name":"Huggy Pop","section":"Modern Huggies","tags":["pop"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Huggy Pop","file":"Huggy Pop.gif"},{"id":"collection-2026__huggy-sunny-hello","name":"Huggy Sunny hello","section":"Modern Huggies","tags":["sunny","hello"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Huggy Sunny hello","file":"Huggy Sunny hello.png"},{"id":"collection-2026__huggy-sunny","name":"Huggy Sunny","section":"Modern Huggies","tags":["sunny"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Huggy Sunny","file":"Huggy Sunny.png"},{"id":"collection-2026__huggy-the-pooh-meme","name":"Huggy the Pooh meme","section":"Modern Huggies","tags":["pooh","meme"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Huggy the Pooh meme","file":"Huggy the Pooh meme.png"},{"id":"collection-2026__huggy-yolk","name":"Huggy Yolk","section":"Modern Huggies","tags":["yolk"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Huggy Yolk","file":"Huggy Yolk.png"},{"id":"collection-2026__karaoke-huggy","name":"Karaoke Huggy","section":"Modern Huggies","tags":["karaoke"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Karaoke Huggy","file":"Karaoke Huggy.png"},{"id":"collection-2026__karaoke-huggy-3","name":"Leaning Huggy","section":"Modern Huggies","tags":["leaning"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Leaning Huggy","file":"Leaning Huggy.png"},{"id":"collection-2026__cowboy-wizard-huggy","name":"Secret Huggy","section":"Modern Huggies","tags":["secret"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Secret Huggy","file":"Secret Huggy.png"},{"id":"collection-2026__star-eyes-wave-huggy","name":"Learning Excited Huggy","section":"Modern Huggies","tags":["learning","excited"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Learning Excited Huggy","file":"Learning Excited Huggy.png"},{"id":"collection-2026__huggy-approved","name":"Huggy Approved","section":"Modern Huggies","tags":["approved"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Huggy Approved","file":"Huggy Approved.png"},{"id":"collection-2026__snake-huggy","name":"Snake Huggy","section":"Modern Huggies","tags":["snake"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Snake Huggy","file":"Snake Huggy.png"},{"id":"collection-2026__super-huggy","name":"Super Huggy","section":"Modern Huggies","tags":["super"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Super Huggy","file":"Super Huggy.png"},{"id":"collection-2026__text-generation-wizard-huggy","name":"Text Generation Wizard Huggy","section":"Modern Huggies","tags":["text","generation","wizard"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Text Generation Wizard Huggy","file":"Text Generation Wizard Huggy.png"},{"id":"collection-2026__transformer-agent-huggy","name":"Transformer Agent Huggy","section":"Modern Huggies","tags":["transformer","agent"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Transformer Agent Huggy","file":"Transformer Agent Huggy.png"},{"id":"collection-2026__vibing-huggy","name":"Vibing Huggy","section":"Modern Huggies","tags":["vibing"],"syn":[],"attr":["unknown","unknown","unknown"],"desc":"Vibing Huggy","file":"Vibing Huggy.gif"},{"id":"collection-2026__huguma","name":"Huguma","section":"Modern Huggies","tags":["huguma","daruma","japanese","lucky","red","pop art","halftone","mascot","おみくじ"],"syn":["daruma doll","good luck","ハグマちゃん","japan","fortune","new year"],"attr":["unknown","unknown","unknown","determined","lucky","japanese","good luck","red","yellow","black"],"desc":"Daruma-style lucky Huggy — Huguma-chan","file":"Huguma.png"},{"id":"collection-2026__spock-huggy","name":"Spock Huggy","section":"Modern Huggies","tags":["spock","star trek","vulcan","salute","science officer","starfleet","blue"],"syn":["live long and prosper","vulcan salute","trekkie","star fleet","leonard nimoy"],"attr":["unknown","vulcan salute","unknown","star trek","space","blue","yellow","starfleet uniform"],"desc":"Star Trek Spock Huggy giving the Vulcan salute","file":"Spock Huggy.png"},{"id":"collection-2026__scanner-huggy","name":"Scanner Huggy","section":"Modern Huggies","tags":["discovery","scanner","tricorder","explore","science","planet","scan","star trek"],"syn":["exploration","research","probe","sensor","discover","scanning","discovery"],"attr":["unknown","unknown","unknown","star trek","science","space","yellow","green","scanner","tricorder","scan beam"],"desc":"Huggy scanning a planet with a handheld scanner","file":"Scanner Huggy.png"},{"id":"collection-2026__protostar-huggy","name":"ProtoStar Huggy","section":"Modern Huggies","tags":["protostar","planet","ring","star","space","cosmic","saturn","orbit"],"syn":["project protostar","galaxy","outer space","celestial"],"attr":["unknown","unknown","unknown","calm","content","space","cosmic","yellow","blue"],"desc":"Planet Huggy with an orbital ring — Project ProtoStar","file":"ProtoStar Huggy.png"},{"id":"collection-2026__huggy-loves-openclaw","name":"Huggy Loves OpenClaw","section":"Modern Huggies","tags":["openclaw","lobster","molty","love","hug","cuddle","heart","crossover","red lobster"],"syn":["huggy x openclaw","exfoliate","valentine","affection","care","embrace"],"attr":["unknown","unknown","unknown","love","cozy","openclaw","crossover","yellow","red"],"desc":"Huggy cuddling Molty the OpenClaw lobster with a heart","file":"Huggy Loves OpenClaw.png"},{"id":"collection-2026__care-for-openclaw","name":"Care for OpenClaw","section":"Modern Huggies","tags":["openclaw","lobster","molty","care","hug","love","support","crossover","red lobster"],"syn":["huggy x openclaw","care emoji","hugging face care","exfoliate","embrace"],"attr":["unknown","unknown","unknown","care","warm","openclaw","crossover","yellow","red"],"desc":"Huggy care hug wrapping around Molty the OpenClaw lobster","file":"Care for OpenClaw.png"},{"id":"logo__hf-logo","name":"HF Logo","section":"Logos","tags":["logo","brand","hugging face","hf","mark","icon","emoji"],"syn":[],"attr":[],"desc":"official hugging face brand logo","file":"HF Logo"},{"id":"logo__rainbow","name":"Rainbow Hugging Face","section":"Logos","tags":["logo","brand","rainbow","colorful","gradient","pride","hf"],"syn":[],"attr":[],"desc":"official hugging face brand logo","file":"Rainbow Hugging Face"},{"id":"logo__title","name":"HF logo + title","section":"Logos","tags":["logo","brand","wordmark","title","text","hugging face","hf"],"syn":[],"attr":[],"desc":"official hugging face brand logo","file":"HF logo + title"},{"id":"logo__white-title","name":"HF logo + white title","section":"Logos","tags":["logo","brand","wordmark","title","white","dark","hugging face","hf"],"syn":[],"attr":[],"desc":"official hugging face brand logo","file":"HF logo + white title"}]</script>
<script src="search.js?v=759c866f" defer></script>
<script>
(function () {
var KNOWN = ['shantell', 'chewy', 'titan', 'bagel', 'luckiest'];
var btns = document.querySelectorAll('.font-toggle button');
function setActive(f) { btns.forEach(function (b) { b.classList.toggle('active', b.dataset.setfont === f); }); }
var cur = document.documentElement.getAttribute('data-font');
if (KNOWN.indexOf(cur) < 0) { cur = 'chewy'; document.documentElement.setAttribute('data-font', 'chewy'); }
setActive(cur);
btns.forEach(function (b) {
b.addEventListener('click', function () {
var f = b.dataset.setfont;
document.documentElement.setAttribute('data-font', f);
try { localStorage.setItem('hfba-font', f); } catch (e) {}
setActive(f);
});
});
})();
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/alpinejs@2.8.2/dist/alpine.min.js" defer></script>
<script>
function downloadImage(url, filename) {
var link = document.createElement("a");
link.href = url;
link.download = filename;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
<style>
/* Hover: a fill slightly darker than the card surface (ink-tinted so it
tracks both themes). Padding + negative margin keep layout unshifted. */
.download-button { transition: transform 0.2s, background-color .15s; padding: 5px 8px; margin: -5px -8px; border-radius: 9px; }
.download-button:hover { background-color: color-mix(in srgb, var(--ink) 9%, transparent); }
.download-button:active { transform: scale(0.80); }
/* ---- Color themes (toggle, bottom-right) ----
"motion" = motiondesign.school palette: warm cream page, charcoal ink +
dark inverted pills. "bluish" = the previous HFBA blue theme. */
:root, [data-theme="motion"] { --bg: #E9E6DD; --header-bg: rgba(233,230,221,.92); --surface: #FBF8F1; --ink: #232323; --muted: #8C8C8C; --muted-2: #555555; --accent: #232323; --accent-text: #ffffff; --border: #D8D3C8; --focus-ring: rgba(35,35,35,.12); }
[data-theme="bluish"] { --bg: #F3F7FA; --header-bg: rgba(243,247,250,.9); --surface: #FFFFFF; --ink: #4D5862; --muted: #9aa6b1; --muted-2: #6b7280; --accent: #3B82F6; --accent-text: #ffffff; --border: #D2DAE1; --focus-ring: rgba(59,130,246,.15); }
body { background-color: var(--bg); }
#theme-toggle { display: none; }
#theme-toggle button { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; padding: 0; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .12s; }
#theme-toggle button.active { outline-color: var(--ink); }
.sw-motion { background: #E9E6DD; border: 3px solid #232323; }
.sw-bluish { background: #F3F7FA; border: 3px solid #3B82F6; }
/* ---- Brand header + swappable display font ---- */
:root { --font-display: 'Chewy', 'Source Sans 3', cursive; }
[data-font="shantell"] { --font-display: 'Shantell Sans', 'Source Sans 3', cursive; }
[data-font="chewy"] { --font-display: 'Chewy', 'Source Sans 3', cursive; }
[data-font="titan"] { --font-display: 'Titan One', 'Source Sans 3', cursive; }
[data-font="bagel"] { --font-display: 'Bagel Fat One', 'Source Sans 3', cursive; }
[data-font="luckiest"] { --font-display: 'Luckiest Guy', 'Source Sans 3', cursive; }
/* Shantell Sans is a variable font with glyph-level irregularity: the BNCE
(bounce) axis + contextual alternates make repeated letters render as
different drawings — organic variation from the font itself, no hacks. */
[data-font="shantell"] .huggiverse-title { font-variation-settings: 'BNCE' 38, 'INFM' 72; font-weight: 800; font-feature-settings: 'calt' 1; }
[data-font="chewy"] .huggiverse-title, [data-font="titan"] .huggiverse-title, [data-font="bagel"] .huggiverse-title, [data-font="luckiest"] .huggiverse-title { font-variation-settings: normal; font-weight: 600; }
#site-header { background: var(--bg); }
.site-inner { padding-top: 8px; padding-bottom: 6px; }
/* Centered hero (matches motiondesign.school/blog); filter row below stays
left-aligned with the grid. */
#hero { padding: 46px 0 26px; text-align: center; }
.huggiverse-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 9vw, 6.75rem); line-height: 1.0; letter-spacing: -.01em; color: var(--ink); margin: 0; }
.hero-sub { font-family: 'Source Sans 3', sans-serif; font-size: clamp(16px, 1.9vw, 19px); color: var(--muted-2); margin: 32px auto 0; max-width: 40rem; line-height: 1.5; letter-spacing: .005em; }
/* Secondary link (e.g. "View official HF branding guideline"): muted, tracks
the theme, darkens to ink on hover. */
.brand-link { color: var(--muted-2); }
.brand-link:hover { color: var(--ink); }
/* Asset name (the file name under each card). Tailwind's font-sans resolves to
'Source Sans Pro', which we don't load — pin it to the loaded Source Sans 3
at a clearer weight, themed ink. Extension labels track the theme too. */
/* Always one line: truncate long names with an ellipsis so every card is the
same height and the grid stays aligned at any screen size. min-width:0 lets
the title shrink beside the download button in the flex row. */
.asset-name { font-family: 'Source Sans 3', sans-serif; font-weight: 600; color: var(--ink); letter-spacing: -.005em; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.font-toggle { display: none; }
.font-toggle .ft-label { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--muted); margin-right: 2px; }
.font-toggle button { font-size: 15px; line-height: 1; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 15px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.font-toggle button:hover { border-color: var(--muted); }
.font-toggle button.active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
/* ---- Search ---- */
#search-header { position: sticky; top: 0; z-index: 30; background: var(--header-bg); backdrop-filter: blur(8px); }
/* .search-inner reuses the page `container mx-auto px-5` so its edges align
with the gallery grid at every breakpoint; only vertical padding is custom. */
.search-inner { padding-top: 14px; padding-bottom: 14px; }
.search-wrap { display: flex; align-items: center; gap: 12px; max-width: 820px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 13px 22px; box-shadow: 0 8.5px 28.4px rgba(192,198,204,.25); transition: border-color .15s, box-shadow .15s; }
.search-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.search-wrap svg { flex: 0 0 auto; color: var(--muted); }
#q { flex: 1 1 auto; border: none; outline: none; background: transparent; font-family: 'Source Sans 3', sans-serif; font-size: 17px; color: var(--ink); }
#q::placeholder { color: var(--muted); }
#q-clear { flex: 0 0 auto; border: none; background: #EFEFEF; color: var(--muted-2); width: 24px; height: 24px; border-radius: 999px; cursor: pointer; font-size: 15px; line-height: 1; display: none; }
#q-clear.show { display: inline-flex; align-items: center; justify-content: center; }
.kbd { flex: 0 0 auto; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; padding: 2px 6px; }
/* grid-template-rows 1fr->0fr animates the real content height to 0 smoothly,
regardless of how many rows the chips wrap to — no max-height guess, no clip. */
#chips-collapse { display: grid; grid-template-rows: 1fr; margin-top: 10px; transition: grid-template-rows .26s ease, opacity .18s ease, margin-top .26s ease; }
#search-header.condensed #chips-collapse { grid-template-rows: 0fr; opacity: 0; margin-top: 0; pointer-events: none; }
#chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; overflow: hidden; min-height: 0; }
/* Chip fill matches motiondesign.school's filter pills: a ~5% ink tint over
the page bg, borderless. color-mix keeps it correct in both themes. */
.chip { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, var(--bg)); border: 1px solid transparent; border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.chip:hover { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
#results-bar { display: none; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
#results-bar.show { display: flex; }
#results-count { font-family: 'IBM Plex Mono', monospace; font-size: 15px; color: var(--muted); }
#results-count b { color: var(--muted-2); }
#results-clear { font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--muted-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; cursor: pointer; }
#searchResults { display: none; }