lfg2025/kaiser-natron
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

brand hero: paint woman silhouette ABOVE the white mound

Browse Source 
The traced mound path extends slightly past the woman's grip
outline; with mound-m on top (the splash entrance order) one finger
bled white where the mound overlapped it. Reordering so the woman
silhouette renders LAST on both viewports — fingers read mint where
they wrap the natron handful, mound stays visible between them
(those gaps are inside the woman path's evenodd fill, so they pass
through to the layer below).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-05-04 13:24:30 +01:00
parent 87f53ccc9d
commit b62f213a11
6 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
dist/assets/HomePage-B8FglSFF.css vendored Normal file
View File

@@ -0,0 +1 @@
@property --hero-feather{syntax:"<percentage>";inherits:false;initial-value:12%}.brand-hero__svg--bg[data-v-89be6d1f]{--hero-feather:12%;-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);transition:--hero-feather .7s 1.15s;display:block}.brand-hero.go .brand-hero__svg--bg[data-v-89be6d1f]{--hero-feather:0%}.brand-hero__svg--portrait[data-v-89be6d1f]{width:100%;height:auto;max-height:56svh;margin:0 auto;display:block}.left-m[data-v-89be6d1f],.right-m[data-v-89be6d1f]{fill:#b5d8b6}.mound-m[data-v-89be6d1f]{fill:#fff}.layer.left-m[data-v-89be6d1f]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(-14%)}.layer.right-m[data-v-89be6d1f]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(14%)}.layer.mound-m[data-v-89be6d1f]{opacity:0;transition:opacity .55s .7s}.brand-hero__copy[data-v-89be6d1f]{opacity:0;transition:opacity .7s 1.15s}.brand-hero.go .layer.left-m[data-v-89be6d1f],.brand-hero.go .layer.right-m[data-v-89be6d1f]{opacity:1;transform:none}.brand-hero.go .layer.mound-m[data-v-89be6d1f],.brand-hero.go .brand-hero__copy[data-v-89be6d1f]{opacity:1}@media (prefers-reduced-motion:reduce){.layer.left-m[data-v-89be6d1f],.layer.right-m[data-v-89be6d1f],.layer.mound-m[data-v-89be6d1f],.brand-hero__copy[data-v-89be6d1f]{opacity:1!important;transition:none!important;transform:none!important}}

1
dist/assets/HomePage-CRHQMhVo.css vendored
View File

@@ -1 +0,0 @@
@property --hero-feather{syntax:"<percentage>";inherits:false;initial-value:12%}.brand-hero__svg--bg[data-v-f4c612f3]{--hero-feather:12%;-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);mask-image:linear-gradient(to right, transparent 0%, #000 var(--hero-feather), #000 calc(100% - var(--hero-feather)), transparent 100%);transition:--hero-feather .7s 1.15s;display:block}.brand-hero.go .brand-hero__svg--bg[data-v-f4c612f3]{--hero-feather:0%}.brand-hero__svg--portrait[data-v-f4c612f3]{width:100%;height:auto;max-height:56svh;margin:0 auto;display:block}.left-m[data-v-f4c612f3],.right-m[data-v-f4c612f3]{fill:#b5d8b6}.mound-m[data-v-f4c612f3]{fill:#fff}.layer.left-m[data-v-f4c612f3]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(-14%)}.layer.right-m[data-v-f4c612f3]{opacity:0;transition:transform .8s cubic-bezier(.22,.61,.36,1) .15s,opacity .6s .15s;transform:translate(14%)}.layer.mound-m[data-v-f4c612f3]{opacity:0;transition:opacity .55s .7s}.brand-hero__copy[data-v-f4c612f3]{opacity:0;transition:opacity .7s 1.15s}.brand-hero.go .layer.left-m[data-v-f4c612f3],.brand-hero.go .layer.right-m[data-v-f4c612f3]{opacity:1;transform:none}.brand-hero.go .layer.mound-m[data-v-f4c612f3],.brand-hero.go .brand-hero__copy[data-v-f4c612f3]{opacity:1}@media (prefers-reduced-motion:reduce){.layer.left-m[data-v-f4c612f3],.layer.right-m[data-v-f4c612f3],.layer.mound-m[data-v-f4c612f3],.brand-hero__copy[data-v-f4c612f3]{opacity:1!important;transition:none!important;transform:none!important}}

2
dist/assets/HomePage-B7k0vO8H.js → dist/assets/HomePage-DQ4v1ey2.js vendored
View File

File diff suppressed because one or more lines are too long

4
dist/assets/index-CN2jXc7i.js → dist/assets/index-pRYmfwS-.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@@ -12,7 +12,7 @@
href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,200;1,9..144,400;1,9..144,600&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap"
rel="stylesheet"
/>
<script type="module" crossorigin src="/assets/index-CN2jXc7i.js"></script>
<script type="module" crossorigin src="/assets/index-pRYmfwS-.js"></script>
<link rel="modulepreload" crossorigin href="/assets/preload-helper-ca-nBW7U.js">
<link rel="modulepreload" crossorigin href="/assets/runtime-core.esm-bundler-DTXUv7Wx.js">
<link rel="modulepreload" crossorigin href="/assets/runtime-dom.esm-bundler-CXLmyuFK.js">

9
src/design-system/components/BrandHero.vue
View File

@@ -49,9 +49,14 @@
preserveAspectRatio="xMidYMid meet"
xmlns="http://www.w3.org/2000/svg"
>
<path class="layer left-m" fill-rule="evenodd" :d="dPortLeft" />
<!-- Mound paints BEHIND the woman so her fingers read mint
where they wrap the natron handful. With the mound
on top (the splash entrance order) one finger bled
white because the mound's bounds extend slightly
past the grip outline. -->
<path class="layer right-m" fill-rule="evenodd" :d="dPortRight" />
<path class="layer mound-m" fill-rule="evenodd" :d="dPortMound" />
<path class="layer left-m" fill-rule="evenodd" :d="dPortLeft" />
</svg>
</div>
@@ -90,9 +95,9 @@
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path class="layer left-m" fill-rule="evenodd" :d="dPortLeft" />
<path class="layer right-m" fill-rule="evenodd" :d="dPortRight" />
<path class="layer mound-m" fill-rule="evenodd" :d="dPortMound" />
<path class="layer left-m" fill-rule="evenodd" :d="dPortLeft" />
</svg>
</div>