import React, { useState, useRef } from "react"; import confetti from "canvas-confetti"; const QUIRKS = [ { text: "Speaks only in rhymes", emoji: "🧑‍🎤", sound: "https://cdn.pixabay.com/audio/2022/10/16/audio_12e8826eac.mp3", // short chime }, { text: "Collects invisible spoons", emoji: "🥄🥄🥄", sound: "https://cdn.pixabay.com/audio/2022/03/15/audio_116b9e4d7e.mp3" }, { text: "Laughs whenever it rains", emoji: "🌧️😂", sound: "https://cdn.pixabay.com/audio/2022/07/26/audio_124b747f54.mp3" }, { text: "Wears socks on their hands", emoji: "🧦✋🧦", sound: "https://cdn.pixabay.com/audio/2022/10/16/audio_12e8826eac.mp3" }, { text: "Sees colors as musical notes", emoji: "🎶🌈", sound: "https://cdn.pixabay.com/audio/2022/03/15/audio_116b9e4d7e.mp3" }, { text: "Only walks backwards", emoji: "🚶‍♂️↩️", sound: "https://cdn.pixabay.com/audio/2022/07/26/audio_124b747f54.mp3" }, { text: "Grows a new freckle when surprised", emoji: "🤔✨", sound: "https://cdn.pixabay.com/audio/2022/10/16/audio_12e8826eac.mp3" }, { text: "Thinks they're a cloud", emoji: "☁️😌", sound: "https://cdn.pixabay.com/audio/2022/03/15/audio_116b9e4d7e.mp3" }, { text: "Talks to plants like old friends", emoji: "🪴🗣️", sound: "https://cdn.pixabay.com/audio/2022/07/26/audio_124b747f54.mp3" }, { text: "Sneezes confetti", emoji: "🤧🎉", sound: "https://cdn.pixabay.com/audio/2022/10/16/audio_12e8826eac.mp3" }, { text: "Refuses to eat round foods", emoji: "🍎🚫⭕", sound: "https://cdn.pixabay.com/audio/2022/03/15/audio_116b9e4d7e.mp3" }, { text: "Collects sounds in a jar", emoji: "🔊🫙", sound: "https://cdn.pixabay.com/audio/2022/07/26/audio_124b747f54.mp3" }, { text: "Always has a balloon floating nearby", emoji: "🎈🧑", sound: "https://cdn.pixabay.com/audio/2022/10/16/audio_12e8826eac.mp3" }, { text: "Dances instead of saying hello", emoji: "💃👋", sound: "https://cdn.pixabay.com/audio/2022/03/15/audio_116b9e4d7e.mp3" }, { text: "Wears hats upside down", emoji: "🎩🔄", sound: "https://cdn.pixabay.com/audio/2022/07/26/audio_124b747f54.mp3" } ]; function getRandomQuirk(lastIndex) { let idx; do { idx = Math.floor(Math.random() * QUIRKS.length); } while (idx === lastIndex && QUIRKS.length > 1); return { ...QUIRKS[idx], idx }; } export default function App() { const [quirk, setQuirk] = useState(() => { const { text, emoji, sound, idx } = getRandomQuirk(-1); return { text, emoji, sound, idx }; }); const audioRef = useRef(null); const [animKey, setAnimKey] = useState(0); const generate = () => { const { text, emoji, sound, idx } = getRandomQuirk(quirk.idx); setQuirk({ text, emoji, sound, idx }); setAnimKey((k) => k + 1); // To trigger animation // Play sound try { if (audioRef.current) { audioRef.current.src = sound; audioRef.current.currentTime = 0; audioRef.current.play(); } } catch {} // Confetti for extra whimsy confetti({ particleCount: 70, angle: 90 + Math.random() * 30, spread: 70, origin: { y: 0.5 }, }); }; // Animation for emoji const [emojiPulse, setEmojiPulse] = useState(false); React.useEffect(() => { setEmojiPulse(true); const t = setTimeout(() => setEmojiPulse(false), 500); return () => clearTimeout(t); }, [animKey, quirk.idx]); return (

Quick Quirk Generator

Instantly generate fun, fictional character quirks for stories, RPGs, or icebreakers – each one comes with a whimsical illustration and playful sound. Ready to spice up your imagination?

{quirk.emoji}

{quirk.text}

Tap below for a new quirk!

); }