Added noise effect to gift card preview and gift link preview image

[minimaluminium]

ref https://linear.app/ghost/issue/BER-3600/design-iteration

Adds a subtle noise texture to the gift card preview and the gift link OG preview image, and reworks the card's notch into a brand-tinted element for a more polished look.

Changes

Portal (in-app gift card)

• New noise texture overlay (gift-card-noise.webp) applied to .gh-portal-gift-checkout-card via a ::after pseudo-element at 10% opacity
• Orb gradient moved from ::after → ::before to make room for the noise layer
• isolation: isolate added to the card so the noise stays contained in its own stacking context
• Notch converted from a ::before pseudo-element to a real <div class="gh-portal-gift-checkout-card-notch"> (with aria-hidden) — needed because both pseudo slots are now used for orb + noise
• Notch background switched from rgba(0, 0, 0, 0.35) to color-mix(in srgb, var(--brandcolor) 65%, #000 35%) so it picks up the site's accent color
• Card site footer's white background moved to a ::before so the noise overlay can sit above it
• Portal version bumped to 2.68.37

Server (OG preview image)

• New gift-card-noise.png tiled across the rendered 1200×630 image via Sharp's composite({ tile: true })
• New buildNotchOverlay SVG composite, tinted with mixWithBlack(accentColor, 0.65) to mirror the CSS color-mix on the front end
• New helpers parseHexColor / mixWithBlack to compute the notch color server-side
• Noise tile buffer is memoized via getGiftCardNoiseTile() so Sharp only resizes it once per process

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 911417a4-3e8a-43d3-a0ef-fc573f9a5cc9

📥 Commits

Reviewing files that changed from the base of the PR and between a5972de and 22dcee5.

⛔ Files ignored due to path filters (1)

• ghost/core/core/server/web/gift-preview/gift-card-noise.png is excluded by !**/*.png

📒 Files selected for processing (7)

• apps/portal/package.json
• apps/portal/src/components/pages/gift-page.js
• apps/portal/src/components/pages/gift-redemption-page.js
• apps/portal/src/components/pages/gift-success-page.js
• apps/portal/src/images/gift-card-noise.webp
• ghost/core/core/server/web/gift-preview/image.js
• ghost/core/test/unit/server/web/gift-preview/image.test.js

✅ Files skipped from review due to trivial changes (2)

• apps/portal/src/components/pages/gift-success-page.js
• apps/portal/package.json

🚧 Files skipped from review as they are similar to previous changes (3)

• apps/portal/src/components/pages/gift-redemption-page.js
• ghost/core/test/unit/server/web/gift-preview/image.test.js
• apps/portal/src/components/pages/gift-page.js

---

Walkthrough

This PR updates gift card visual styling by introducing a noise texture overlay and a dedicated notch decorative element. Frontend changes add CSS styling with improved layer composition and insert notch elements into gift card markup across three portal pages. Backend changes update server-side image generation to composite a tiled noise buffer and SVG notch overlay with accent-derived colors beneath text overlays, with module-level caching to avoid re-rendering the noise tile.

Possibly related PRs

• TryGhost/Ghost#27668: Both PRs touch the same gift-card UI/markup (adding a dedicated notch element and updating card visuals) and related preview assets/overlays.

Suggested labels

preview

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change—adding noise effects to gift card and preview images—and aligns with all file modifications in the changeset.
Description check	✅ Passed	The description is directly related to the changeset, providing detailed context about noise texture additions, notch reworking, and color-mixing implementation across Portal and server components.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch gift-subs-design-iteration-8

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sagzy]

nit: works, but feels weird to pass sharp as parameter

We should be okay to lazy-require sharp in getGiftCardNoiseTile, as Node caches require() results

so e.g.

async function getGiftCardNoiseTile() {
    if (giftCardNoiseTile !== undefined) {
        return giftCardNoiseTile;
    }

    const sharp = require('sharp');
    giftCardNoiseTile = await sharp(GIFT_CARD_NOISE_PATH)
        .resize(192, 192, {kernel: 'nearest'})
        .png()
        .toBuffer();

    return giftCardNoiseTile;
}

[sagzy]

Updated in 22dcee5