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 Cauldron component is an SVG illustration of a bubbling cauldron that sits at the foot of the Contact page as a thematic ambient element. It remains still and dormant while the message field is empty, then springs to life — bubble circles animating upward from the cauldron’s mouth — the moment a visitor begins typing their message. When the form is submitted and the message is sent, the cauldron quiets again, signaling that the spell has been cast.

​
Where It’s Used

Cauldron is rendered at the bottom of the Contact page (/contact), below the message form. Its isBubbling state is derived directly from whether the textarea has content and whether the form has been submitted — making it a live visual indicator of the user’s input activity.

​
Props

​
isBubbling
boolean
required
Controls whether the bubbling animation is active. When true, bubble SVG elements animate upward from the cauldron mouth in a looping sequence. When false, the cauldron renders in a static idle state with no movement.

​
Usage

import Cauldron from "@/components/Cauldron";

<Cauldron isBubbling={messageText.length > 0 && !isSubmitted} />
Full Contact page integration: 
const [messageText, setMessageText] = useState("");
const [isSubmitted, setIsSubmitted] = useState(false);

<form onSubmit={handleSubmit}>
  <textarea
    value={messageText}
    onChange={(e) => setMessageText(e.target.value)}
    placeholder="Write your incantation..."
  />
  <button type="submit">Send the Hex</button>
</form>

<Cauldron isBubbling={messageText.length > 0 && !isSubmitted} />

​
Behavior Details

​
Idle State (isBubbling={false})

When isBubbling is false, the cauldron SVG renders without any animated elements. The cauldron body, legs, and handles are fully visible, but the liquid surface is flat and the bubble elements are hidden (either not rendered or set to opacity: 0). This communicates a “cold” or “empty” cauldron, matching the unstarted state of the contact form.

​
Bubbling State (isBubbling={true})

When isBubbling is true, multiple small circle elements animate from the cauldron’s open top upward through a keyframe sequence:
  • Bubble circles are staggered with different animation-delay values so they don’t all rise in unison.
  • Each bubble moves upward along the Y-axis and fades out as it ascends, simulating a bubble breaking the liquid surface and dissipating.
  • The liquid surface itself may also animate with a gentle wave or ripple to reinforce the bubbling effect.

​
Trigger Logic

The boolean expression messageText.length > 0 && !isSubmitted ensures:
  • Bubbling starts as soon as the first character is typed in the textarea.
  • Bubbling stops immediately after the form is submitted, regardless of whether the textarea is cleared — the sent message’s spell has been completed.
<Cauldron isBubbling={false} />
Static SVG. No bubble animation. Cold, waiting state.

​
Customization Tips

The cauldron is designed as a purely decorative component — it has no interactive surface and fires no events. Do not wrap it in a <button> or assign click handlers, as this would create a confusing affordance for users.

Trigger Condition

The isBubbling expression is evaluated entirely in the Contact page. You can adjust the trigger threshold — for example, messageText.length > 20 — to make the cauldron activate only after a few words have been typed.

Bubble Timing

Bubble animation timing (speed, stagger, height) is controlled by keyframe definitions inside Cauldron.js. Adjust animation-duration and animation-delay values there to speed up or slow down the bubbling rhythm.

Reduced Motion

Wrap the bubble animations in a @media (prefers-reduced-motion: reduce) rule to render a static cauldron for users who have requested minimal motion in their OS settings.

Placement

The cauldron is positioned below the form. If the Contact page layout changes, keep the cauldron in the visual footer zone of the form so the bubbling activity remains visually associated with the textarea above it.
Cauldron accepts only a single boolean prop. All animation logic is encapsulated inside the component — no CSS class names or animation tokens need to be passed from the parent.

Build docs developers (and LLMs) love

Get started for freeTalk to us