Dynamic Emotion-Driven Chat Bubbles
Budget: $250 – $750 USD
I'm developing a mobile and desktop app using React, TypeScript, Vite, Tailwind CSS, Supabase, and PostgreSQL. I need custom chat bubbles that act like expressive avatars.
The outer shell of the bubble should communicate body language. A shy or nervous speaker might have a softer border, faded edges, smaller presence, slight trembling, or hesitant pulsing. An authoritative speaker might have a thicker border, sharper shape, stronger contrast, steadier animation, and more visual weight. An intimidated speaker might shiver, compress slightly, or flicker at the edges. An injured speaker might crack, glitch, drip, or destabilize.
The text itself should communicate vocal cues. Words can shake when scared, stretch when strained, enlarge when emphasized, fade when whispered, blur when exhausted, stutter when panicked, or sharpen when angry. Individual words should support emphasis styling without making the whole message unreadable.
Mood can be shown through color accents, glow, motion rhythm, typing speed, and subtle particle effects. The system should support animation presets, reduced-motion accessibility, and persistent snapshots so old messages keep the emotional state they had when created.
Requirements:
- Body language borders to convey emotions (e.g., bold for authority, cracked for pain)
- Motion effects for emotional states (e.g., shivering for fear, fading for shyness)
- Text modifications for vocal cues (e.g., whispers fading, emphasis growing)
- Metadata-driven effects for dynamic readability
Ideal Skills:
- Strong proficiency in React and TypeScript
- Experience with Vite, Tailwind CSS, and Supabase
- Background in UI/UX design for emotion-driven interfaces
- Knowledge of animation and motion design in web applications
Please provide examples of similar work.
The outer shell of the bubble should communicate body language. A shy or nervous speaker might have a softer border, faded edges, smaller presence, slight trembling, or hesitant pulsing. An authoritative speaker might have a thicker border, sharper shape, stronger contrast, steadier animation, and more visual weight. An intimidated speaker might shiver, compress slightly, or flicker at the edges. An injured speaker might crack, glitch, drip, or destabilize.
The text itself should communicate vocal cues. Words can shake when scared, stretch when strained, enlarge when emphasized, fade when whispered, blur when exhausted, stutter when panicked, or sharpen when angry. Individual words should support emphasis styling without making the whole message unreadable.
Mood can be shown through color accents, glow, motion rhythm, typing speed, and subtle particle effects. The system should support animation presets, reduced-motion accessibility, and persistent snapshots so old messages keep the emotional state they had when created.
Requirements:
- Body language borders to convey emotions (e.g., bold for authority, cracked for pain)
- Motion effects for emotional states (e.g., shivering for fear, fading for shyness)
- Text modifications for vocal cues (e.g., whispers fading, emphasis growing)
- Metadata-driven effects for dynamic readability
Ideal Skills:
- Strong proficiency in React and TypeScript
- Experience with Vite, Tailwind CSS, and Supabase
- Background in UI/UX design for emotion-driven interfaces
- Knowledge of animation and motion design in web applications
Please provide examples of similar work.