Kite: Paper Plane Contact Form
A playful React contact form whose send button launches a paper plane: it flies to centre, turns green, rides the wind lines and lands a success message.
Try it live
The real demo, running in a sandbox. Switch the screen size to see how it adapts.
About this item
Kite makes getting in touch feel rewarding. A clean card with name, email and message fields sits beside soft background circles and motion lines; press send and a paper plane takes off, flashes green, is carried away on animated wind lines and a "Sent Successfully!" message appears exactly as it reaches the corner.
A choreographed send sequence
Framer Motion animation controls run the flight in stages: fly to centre, colour change, wind, and fly-away to the top corner, then reveal the success state.
Ready for real forms
Name, email and message fields, social icons and a clear success state; hook the submit handler up to your API, Formspree or email service.
Features
- ✓Contact form with name, email and message
- ✓Multi-stage paper plane send animation
- ✓Colour change and wind-line effects
- ✓Animated success message
- ✓Decorative background circles and motion lines
- ✓Social icon links
- ✓Framer Motion animation controls
- ✓Single component + CSS file
What's included
Full JavaScript source code,package.jsonwith locked dependencies, Vite config, RVT.ai README with setup and customisation guide,LICENSEandTHIRD-PARTY-NOTICES.md. Nonode_modules: runnpm installonce.
Requirements
Node.js 20.19+ and npm 10+ to develop and build. The production build is static HTML, CSS and JavaScript that runs on any static host. No backend, API keys or paid services required.
Perfect for
- Contact and support pages
- Agency and portfolio sites
- Newsletter and waitlist sign-ups
- Feedback widgets
From download to production
- Download Kite: Paper Plane Contact Form from your account and unzip it.
- Run
npm install, thennpm run devto open it locally. - Swap in your brand colours, copy and data (see the README customisation guide).
- Run
npm run buildand deploy thedist/folder to any static host.
Support and updates
Includes free updates and six months of RVT.ai support. Ask pre-purchase questions in the product Q&A, or open a ticket at https://rvt.ai/support with your order number.
Choose the license for your project
A Regular license covers a single end product that is not sold to end users. Choose Extended for a single end product that is sold to end users, including SaaS products and paid applications. Review the full license terms before checkout.
Features
- Contact form with name, email and message
- Multi-stage paper plane send animation
- Colour change and wind-line effects
- Animated success message
- Decorative background circles and motion lines
- Social icon links
- Framer Motion animation controls
- Single component + CSS file
Files included
- Full source code (React + Vite)
- README.md
- LICENSE (RVT.ai)
- THIRD-PARTY-NOTICES.md
- package.json + package-lock.json
Version 1.0.0 and changelog
Version 1.0.0
Initial RVT.ai release.