Track the magical mishaps and spooky shenanigans of your enchanted kitten! A whimsical web application that lets you document paranormal events caused by a magical kitten and their frightened chick companion.
Live Demo: https://purranormal-activity.pages.dev/
- Event Logging: Document supernatural occurrences with detailed descriptions.
- AI-Powered: Generates unique images for each paranormal event using OpenAI’s DALL-E.
- Magical Categories: Organize events by paranormal categories for easier filtering.
- Real-time Updates: View the latest supernatural happenings in a magical feed.
- Responsive Design: Enchanting experience on all devices.
- View Transitions: Smooth, mystical page transitions using
next-view-transitions.
- Framework: Next.js 15 with the App Router
- Language: TypeScript
- Database: Turso + Drizzle ORM
- Styling: Tailwind CSS
- Image Generation: OpenAI DALL-E
- Image Storage: AWS S3
- Deployment: Cloudflare Pages
- View Transitions:
next-view-transitions
A playful fairy-tale world infused with paranormal elements. The design combines tongue-in-cheek humor with dreamy magical visuals.
Color Scheme
- Primary: Deep purples, midnight blues, and starry blacks for a mystical night-sky environment.
- Accent: Neon greens, glowing whites, and pale pinks to highlight ghostly apparitions.
Typography
- Primary Font: A whimsical, slightly quirky serif that evokes magical texts.
- Secondary Font: A clean, playful sans-serif for readability.
Visual Motifs
- Subtle ghostly shapes drifting in the background.
- Sparkles, wisps of magic, and curling smoke for a mysterious feel.
- Main Illustration: A magical kitten casting spells with a tiny witch’s hat; the frightened chick peeks out from behind a stack of witchy spell books.
- Animations:
- Soft glowing aura or floating particles around the kitten.
- Occasional ghost drifting across the screen.
- Tagline: “Track the Spooky Shenanigans of Your Magical Kitten!”
- CTA: A whimsical button (e.g., “Begin Your Paranormal Log”) leading to sign-up or login.
- Layout: Carousel or grid of “Latest Paranormal Occurrences.”
- Card Hover Effects: Subtle bobbing or glowing edges.
- Transitions: Fade-ins and ghost-like silhouettes as the user scrolls.
- Form Design: Whimsical, parchment-textured background.
- Fun Placeholders: e.g., “What magical mischief occurred at the stroke of midnight?”
- Animated Elements: A quill pen icon might sparkle on input focus.
- Visuals: Arcane “statistics” area with charts resembling cauldrons or crystal balls.
- Animations: Bars fill up like glowing liquid; spectral orbs for pie charts.
- Data Headings: “Ghostly Encounters,” “Witching Hours,” “Magical Mishaps,” etc.
- Navigation:
- A whimsical top bar with playful hover states—icons with cat paws or crystals that glow on hover.
- Micro-Interactions:
- Subtle sparkles when buttons are clicked.
- Smooth transitions and gently animated elements.
- Branding Through Imagery:
- Consistent appearance of the magical kitten and frightened chick throughout the app (peeking behind charts, looking nervous during event log submissions).
- Clone the repository:
git clone https://github.com/yourusername/purranormal-activity.git- Install dependencies:
pnpm install- Copy
.env.exampleto.envand fill in your environment variables:
cp .env.example .env- Start the development server:
pnpm dev- Open http://localhost:3000 with your browser.
The application features a mystical and enchanting design with:
- Deep purples and midnight blues for a mystical atmosphere
- Playful animations and transitions
- Responsive and mobile-first approach
- Accessibility considerations
- Server-side rendering for optimal performance
This project is licensed under the MIT License - see the LICENSE file for details.
Contributions are welcome! Please feel free to submit a Pull Request.
- Special thanks to the Next.js team for the amazing framework
- OpenAI for the image generation capabilities
- The open-source community for all the wonderful tools
Made with ❤️ and a sprinkle of magic ✨