Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/groovy/llms.txt

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

DaisyForm reimagines the humble contact form as a blooming daisy. Three input petals radiate from a central yellow submit button: the name petal (fuchsia, rotated −60°), email petal (sky blue, rotated 0°), and message petal (lime green, rotated +60°). Submitting the form triggers a two-phase animation — a Sending Vibes… loading state followed by a confetti burst and a Peace! success confirmation — before automatically resetting after five seconds.

​
Configuration

DaisyForm accepts no props. Form submission behaviour (endpoint, validation, error handling) is configured directly inside the component. The default implementation uses a 1.5-second artificial delay to simulate a network request; replace the setTimeout with your actual submission logic (e.g. a fetch to an API route or a form service like Formspree).

​
Petal Fields

PetalFieldInput typeAccent colourRotation
Namenametext#d946ef (fuchsia)−60°
Emailemailemail#38bdf8 (sky blue)0°
Messagemessagetextarea#a3e635 (lime)+60°
Each petal is a motion.div positioned absolutely around the centre point. The petal’s border and label colour are driven by its accent hex value, making each field visually distinct without relying on placeholder text alone.

​
Interaction & Animation States

Component state is managed with two useState variables:
VariableTypePurpose
isSubmittingbooleantrue during the 1.5s send delay; shows ‘Sending Vibes…’ on the button
isSuccessbooleantrue after the delay resolves; triggers confetti and ‘Peace!’ display

​
Submission Flow

  1. User clicks the centre submit button.
  2. isSubmitting → true. Button label changes to Sending Vibes… and is disabled.
  3. After 1.5 s, isSubmitting → false, isSuccess → true.
  4. Peace! replaces the button label. Thirty confetti circles burst outward in 6 colours with repeat: Infinity animations.
  5. After 5 s, isSuccess → false and the form resets to its idle state.

​
Confetti

The confetti burst spawns 30 motion.div circles. Each circle is assigned one of six colours and an independently randomised trajectory (x, y, rotate final values). The animation runs with repeat: Infinity for the duration of the success state, creating a continuous celebratory loop rather than a single-shot burst.
Because the confetti animation uses repeat: Infinity, it must be interrupted cleanly when isSuccess resets to false. The confetti elements are conditionally rendered only while isSuccess is true, so unmounting them via AnimatePresence with a short exit opacity fade is sufficient to avoid animation memory leaks.

​
Usage

import DaisyForm from './components/DaisyForm';

function ContactPage() {
  return (
    <section className="min-h-screen flex flex-col items-center justify-center py-24">
      <h2 className="text-4xl font-bold mb-16 text-fuchsia-600">
        Drop Some Vibes ✌️
      </h2>
      <DaisyForm />
    </section>
  );
}
The daisy layout requires a minimum container width of approximately 480px for all three petals to be fully visible without overlap. On viewports narrower than this, consider switching to a stacked single-column layout by wrapping DaisyForm in a responsive container that conditionally applies flex-col and removes the absolute petal positioning below your chosen breakpoint.

Build docs developers (and LLMs) love

Get started for freeTalk to us