FAQ with Spiral
Interactive FAQ with animated golden spiral background and search
FAQ with Spiral
An interactive FAQ component featuring a mesmerizing golden spiral background animation. Includes search functionality, collapsible questions, and a customizable control panel for real-time spiral adjustments.
FAQ
Clean, minimalistic, black‑and‑white.
We design and build digital products end‑to‑end: research, UX/UI, front‑end/back‑end, infrastructure, and release support.
Iteratively. Solution storyboards → quick prototypes → user testing → prioritization → production integration. Transparent at every stage.
TypeScript/React/Next.js, Node.js, Python, Postgres, Redis, Tailwind, Playwright, CI/CD on GitHub Actions. Deployment — containers and clouds.
Yes. We prepare private demo environments, give repository access and supply documented examples.
We evaluate MVPs by impact metrics — value/complexity. We provide T‑shirt sizing bounds, then lock sprints with checkpoints.
Yes. We audit, clean up architecture/CI, eliminate debts, set up monitoring and take over under SLA.
Install the component using the shadcn CLI:
npx shadcn@latest add @uimix/faq-with-spiralThis will automatically add the component to your project.
Copy and paste the following code into your project:
Make sure you have the required animations in your tailwind.config.js:
module.exports = {theme: { extend: {}}}Add the required classes to your global stylesheet:
/* No additional CSS required - SVG animations are inline */Usage
import FAQWithSpiral from '@/registry/default/faq-with-spiral'
export default function Page() {
return <FAQWithSpiral />
}Features
- •Golden Spiral - Beautiful Fibonacci spiral with configurable animation
- •Search Functionality - Real-time filtering of FAQ items
- •Interactive Controls - Live customization of spiral properties
- •Gradient Options - 8 preset gradient styles including rainbow, ocean, neon
- •Keyboard Shortcuts - H to toggle panel, R to randomize settings
- •Responsive Grid - Two-column layout on desktop, single on mobile