The Divination Request is Oracle’s contact form — a single-page ritual that lets visitors cast a message into the ether and reach Alex Weaver directly. Every label is written in the project’s mystical vocabulary (“Whisper your name”, “Leave a sigil”), and the submit button reads “Send Across the Veil.” The real centrepiece, however, is what happens after the form is submitted: a burst of five turquoise orbs erupts across the card, the form fades away, and a “Message Received” confirmation materialises in its place — all choreographed with Framer Motion before the form quietly resets itself four seconds later.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/oracle/llms.txt
Use this file to discover all available pages before exploring further.
Form Fields
| Label | Type | Placeholder | Required |
|---|---|---|---|
| Whisper your name | text | e.g. Merlin | ✅ |
| Leave a sigil (email) | email | merlin@camelot.com | ✅ |
| What spell do you need cast? | textarea (4 rows) | I seek a frontend alchemist to... | ✅ |
border-b border-turquoise/30) on a transparent background, keeping the look minimal and arcane. The textarea swaps to a full border variant with a dark bg-dark/50 fill to visually distinguish multi-line input from single-line fields. Placeholders are rendered at parchment/20 opacity — just visible enough to guide without distracting.
Submit Flow
Fill in your name, email, and message
Complete all three required fields. The
required attribute on each input activates native browser validation, so the form will not submit if any field is empty or the email address is malformed.Click "Send Across the Veil"
The full-width button at the bottom of the card triggers the form’s
onSubmit handler. A radial-gradient overlay (from-turquoise/20 to-transparent) fades in on hover, hinting at the magic about to be unleashed."Brewing..." — 1.5 second delay
The button immediately becomes
disabled and its label switches to "Brewing...". The disabled:opacity-50 and disabled:cursor-not-allowed Tailwind classes reflect the waiting state visually. This 1.5 s window simulates an async operation and builds anticipation before the success state fires.Turquoise particle explosion + success message
After 1.5 seconds the form card fades and shrinks (
opacity: 0, scale: 0.9) while five turquoise orbs burst outward and a “Message Received” confirmation fades in with a sparkle emoji above it and the caption “The spirits will deliver your words shortly.”Success State
The success animation is composed of two Framer Motion layers that mount simultaneously inside anAnimatePresence block:
Particle layer — five motion.div elements are generated with [...Array(5)].map(...). Each orb starts invisible and collapsed (scale: 0, opacity: 0.8) then animates through three keyframes:
blur-xl) circular div styled bg-turquoise/20, so in aggregate they produce a soft, luminous explosion rather than harsh shapes. The staggered 0.2 s delays make the burst feel like a fountain rather than a simultaneous flash.
Text layer — a motion.div wrapping the confirmation copy starts at opacity: 0, y: 20 and eases to full visibility with a 0.5 s entrance delay, ensuring the particle burst is already in flight before the words appear:
✨ emoji, an h3 reading “Message Received” in parchment serif, and a font-mono subtitle in turquoise/60.