Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/web-weaver/llms.txt

Use this file to discover all available pages before exploring further.

The WaxSeal component is a thematic, circular button styled to look like an old wax seal pressed onto parchment. On the Case Studies page, each study is initially presented with its deeper details hidden — a WaxSeal sits over the hidden section, and clicking it “breaks” the seal to reveal the full content scroll below. The component’s deep-red wax color, decorative border, and hover glow make it an unmistakable call-to-action within the dark mystical aesthetic.

​
Where It’s Used

WaxSeal is placed on the Case Studies page (/case-studies). Each case study card renders one WaxSeal instance positioned over a collapsed detail section. Clicking it fires the onClick callback, which updates the parent’s revealedId state and expands the hidden content.

​
Props

​
text
string
required
The label displayed inside or near the seal. This text should hint at the action — for example "Break Seal to Read". Keep it short so it fits within the circular boundary of the seal design.
​
onClick
() => void
required
A callback function fired when the user clicks the seal. Use this to update a reveal state in the parent component, toggle visibility of hidden content, or trigger any other side effect.

​
Usage

import WaxSeal from "@/components/WaxSeal";

<WaxSeal
  text="Break Seal to Read"
  onClick={() => setRevealedId(study.id)}
/>
Full implementation as used on the Case Studies page: 
{caseStudies.map((study) => (
  <div key={study.id} className="relative">
    <h2>{study.title}</h2>
    <p>{study.summary}</p>

    {revealedId !== study.id ? (
      <WaxSeal
        text="Break Seal to Read"
        onClick={() => setRevealedId(study.id)}
      />
    ) : (
      <div className="case-study-details">
        {study.fullContent}
      </div>
    )}
  </div>
))}

​
Behavior Details

​
Visual Design

The seal is a circular element rendered in wax-red — a deep crimson consistent with the app’s dark palette. It features:
  • A decorative border inset from the outer edge, mimicking the impressed ring of a real wax seal.
  • A text label centered within the circle.
  • A subtle drop shadow to lift the seal off the background, reinforcing the physical metaphor.

​
Hover State

On hover, two effects activate simultaneously:
  • Scale — the seal grows slightly (via a scale transform), making it feel pressable.
  • Glow — a red-hued box shadow or CSS filter intensifies around the perimeter, as though the wax is warming under the cursor.
These effects are applied through Tailwind utility classes or embedded styles within the component.

​
Click Behavior

WaxSeal is a stateless presentational component — it does not track whether it has been clicked. The parent is responsible for replacing the WaxSeal with the revealed content once onClick fires. This means the seal “disappears” after being broken, which reinforces the one-way reveal metaphor. 
<WaxSeal
  text="Break Seal to Read"
  onClick={() => setRevealedId(study.id)}
/>
Seal is visible. Details are hidden. Hover activates scale and glow.

​
Customization Tips

Keep text to 3–5 words. Longer strings will overflow the circular boundary or require font-size reductions that undermine legibility at the default seal size.

One-Way Reveal

The Case Studies page never re-seals a study once revealed. If you need a toggle (seal → unseal → seal), you’ll need to manage that in the parent and conditionally re-render WaxSeal.

Positioning

Use absolute positioning on the wrapper to overlay WaxSeal on top of a blurred or faded preview of the hidden content, strengthening the “hidden beneath the seal” metaphor.

Custom Text

Each study can use a different text value — for example "Unseal This Hex" or "Open the Scroll" — to give each case study its own personality.

Animation on Break

Consider adding a brief exit animation (scale up + fade out) on the WaxSeal before swapping it for the revealed content, to sell the “breaking” moment.
WaxSeal renders no internal state. It fires onClick and leaves all reveal logic to the parent component. This makes it trivially reusable anywhere a thematic “reveal” trigger is needed.

Build docs developers (and LLMs) love

Get started for freeTalk to us