Warm and cool light leaking from a prompt, for a louder composer.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/aura-framePlayground
rest
thinking
listening
State
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/aura-frame
Accessibility
- The field carries the label and says Thinking or Listening.
- The glyph field is hidden from screen readers.
Motion
- Glows rest at 28% with glyphs at 42%. Focus raises both glows to 60% and the hairline to full strength in 400 ms.
- Thinking re-rolls the glyphs by the warm glow every 80 ms, and that glow breathes at 2.4 s.
- Listening leans the cool glow with voice level.
- With reduced motion, glows are fixed by state and glyphs are still.
Responsive behavior
- 560 px on Web, 358 px on Mobile, with smaller glows.
- Input 14/22 on Web, 16/24 on Mobile.
- Mobile hides DeepThink and shows Voice as an icon button.
Performance
- Thinking repaints the glyph field every 80 ms, and skips ticks when the tab is hidden or the frame is off screen.
- The timer only runs in Thinking, and it stops when motion is off.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import AuraFrame. Props: label, placeholder, state, statusText, mode, onMode, defaultDeepThink, onAttach, onSubmit, onStop, onVoice, voiceLevel.
- state is rest, thinking or listening, and you set it. statusText shows in the field while thinking.
- It composes Button and Icon Button. Nothing is connected in the demo.
Related
Metal FrameComponentRings any box in liquid chrome: bands drift round the edge, the edge swells toward the pointer, and thinking runs them faster.Liquid RingComponentWraps the prompt composer in a liquid metal ring with an orbiting glow and a voice beam.Bezel FrameComponentSeats a single prompt in a bezel ringed in sky chrome, for a hero search.PromptProComponentTwo composers. AI Prompt is the lighter chat composer with commands, files and hints. Prompt Input is the agent composer, where the header names the mode: ask, responding, voice or actions.