The Contact page transforms a standard contact form into a small ritual. Two fields — the visitor’s name (“True Name”) and their message (“Your Incantation”) — sit above a submit button labelled “Cast Spell”. As the visitor types in the message textarea, aDocumentation 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.
Cauldron component below the form begins to bubble, responding to the presence of content. On submission the form fades out entirely and is replaced by a gentle “Sent on the wind…” confirmation message.
Route
#/contact, click the Contact link in the site navigation, or use the “Summon Me” CTA button on the Home page.
Visual Layout
Name Field
A single-line text input labelled “True Name”. Collects the visitor’s name. Standard HTML
type="text" input with the portfolio’s dark-themed input styles applied.Message Textarea
A multi-line textarea labelled “Your Incantation / Message”. The
Cauldron component observes whether this field has content and animates accordingly.Submit Button
A styled button labelled “Cast Spell”. Triggers form submission handling on click. Disabled (or shows a loading state) while a submission is in flight.
Cauldron Component
An animated SVG cauldron rendered below the form fields. When the message textarea is empty the cauldron is still; when it contains text, bubble animations play inside the cauldron, hinting that the spell is being prepared.
Form Fields Reference
| Field | Label | Input type | Required |
|---|---|---|---|
| Name | True Name | text | Yes |
| Message | Your Incantation / Message | textarea | Yes |
Customisation
Wire up a real form submission endpoint
Change the field labels
The label strings “True Name” and “Your Incantation / Message” are hard-coded in the Contact component’s JSX. Replace them with whatever labels suit your preferred tone — they do not need to be whimsical if a more professional style fits your audience.
Change the button label
The “Cast Spell” button text is a string constant in the Contact component. Update it to
"Send Message", "Get in Touch", or any other label.Customise the success message
The “Sent on the wind…” confirmation string is defined inline in the Contact component’s conditional render. Replace it with your preferred success copy, and optionally add a follow-up line (e.g. “I’ll reply within 24 hours.”).
Add additional fields
To collect more information (subject, company, budget range), add new
useState variables for each new field, render the corresponding <input> or <select> elements, and include the new values in the submission payload. Update the Cauldron trigger logic if you want it to respond to the new fields as well.Key Components
| Component | Description | Docs |
|---|---|---|
Cauldron | Animated SVG cauldron that bubbles when hasContent prop is true | /components/cauldron |
ContactForm | Form wrapper managing field state, submission state, and success/failure rendering | Internal |
Interactive Behaviour
Cauldron bubbles while message has content
Cauldron bubbles while message has content
The Contact component tracks the message textarea’s value with a
useState variable. A derived boolean — messageHasContent — is true when the string is non-empty and false when the field is blank. This boolean is passed to the Cauldron component as the hasContent prop.Inside Cauldron, Framer Motion motion.circle elements (representing bubbles) animate upward when hasContent is true. The animation uses AnimatePresence so bubbles fade out smoothly when the field is cleared.Form fade-out on successful submission
Form fade-out on successful submission
The Contact component maintains a
submitted boolean in state. On a successful form submission, submitted is set to true. The component’s render output is wrapped in a Framer Motion AnimatePresence: when submitted is false the form renders; when it is true the form unmounts with an opacity fade and the success message mounts in its place with a reciprocal fade-in.Disabled state during submission
Disabled state during submission
While the form’s async
onSubmit function is awaiting a network response, a submitting boolean is set to true. The “Cast Spell” button receives disabled={submitting} and the inputs receive readOnly={submitting} to prevent duplicate submissions or edits while the request is in flight.The form does not include client-side validation by default beyond HTML
required attributes. To add richer validation (minimum message length, email format checking, profanity filtering), use a library like react-hook-form with a zod schema, or write custom validation logic in the onSubmit handler before the network call.