MVPBlocks

The Designer Portfolio (also referred to as Fiona’s Portfolio) is a high-end, visual-first template designed for creatives like UI/UX designers, artists, and freelancers. It is built using Next.js, Framer Motion, and Tailwind CSS to provide an immersive, agency-quality experience.

Key Features:

• Visual Storytelling: Smooth animations and transitions powered by Framer Motion.
• Color Variants: Includes three distinct themes: Rose, Lime Green, and Blue.
• Comprehensive Layouts: Pre-built sections for Hero, About, Projects, Process, Testimonials, and Contact.
• Polished UX: Includes a theme toggle (light/dark mode), responsive design, custom 404/error/thank-you pages, and smooth scroll effects.

MVPBlocks is an open-source UI component library designed to accelerate MVP development. It provides pre-built, responsive, and animated sections for SaaS dashboards, landing pages, e-commerce, and more.

Core Tech Stack:

• Framework: Next.js
• Styling: TailwindCSS
• UI Components: shadcn/ui
• Animations: Framer Motion

MVPBlocks is an open-source component library designed for rapid MVP (Minimum Viable Product) development. It provides a curated set of reusable, copy-pasteable UI blocks built with Next.js and TailwindCSS.

Key features include:

• Developer-First: Minimal overhead with clean, editable code.
• CLI Support: A smart CLI for seamless workflow integration.
• Customizable: Every block is designed to be modified in terms of layout, logic, style, and structure.
• Multi-Viewport: Blocks are optimized for all screen sizes, from mobile to ultra-wide monitors.
• Web UI: An intuitive interface at blocks.mvp-subha.me allows you to browse, filter by category (e.g., Auth, Dashboard, Hero, Pricing), and copy components with a single click.

AuraClaw is a production-ready AI chatbot template powered by the Vercel AI SDK. It provides a foundation for building AI SaaS platforms, agentic products, or rapid prototypes.

Key capabilities include:

• Multi-model support: Access multiple AI providers through a single interface.
• Streaming UI: Real-time streaming of Markdown, KaTeX math (inline and display), and syntax-highlighted code.
• Persistence: Chat history stored in Neon Postgres and managed via Clerk authentication.
• Optimistic UI: Instant message updates to prevent disruptive loading states.
• Voice Mode (Ultimate Edition only): Whisper-based transcription and speech playback with live closed captions.
• Sidebar Management: Time-based grouping (Today, Yesterday, etc.) with search, rename, archive, and delete capabilities.

MVPBlocks components are organized into several functional categories to help you find the right building blocks for your project. You can browse documentation for specific component types including:

• Basics: Fundamental building blocks.
• Required: Essential components.
• MainSections: Large structural layout sections.
• Forms: Input elements and form structures.
• Cards: Various card-based UI patterns.
• Chatbot: Chat interface components.
• Dashboard: Dashboard and administrative UI elements.
• Creative: Specialized or artistic components.
• Grids: Layout and grid systems.
• Text Animations: Components focused on typography and motion.

Contact sections in MVPBlocks are designed to allow users to get in touch with you via forms or other contact methods. They are primarily used for gathering user feedback, handling inquiries, and managing support requests.

Available contact section components include:

• contact-us-1: A contact layout component.
• contact-us-2: An alternative contact layout component.

MVPBlocks provides a collection of basic card designs for showcasing content through different layouts. The available basic card types include:

• Dot Card: A card design featuring dot-based aesthetics.
• Meshy Cards: A card design with a meshy/textured visual style.
• Retro Card: A card design with a retro/vintage aesthetic.

The MVPBlocks CLI is designed for rapid development with the following capabilities:

• Auto-Project Initialization: Creates production-ready projects automatically without manual setup.
• Interactive Theme Selection: Provides expertly crafted color palettes to avoid manual CSS variable tweaking.
• Intelligent Component System: Optimized for modern development using TypeScript and Tailwind CSS.
• Package Manager Intelligence: Automatically detects and respects your preferred package manager (e.g., npm, yarn, pnpm).
• Smart Defaults: Configures projects with TypeScript, Tailwind CSS, and the latest versions of dependencies by default.

The component uses motion for high-performance animations. Understanding these values can help when debugging or attempting to match the component's feel in other parts of your UI.

Spring Physics

• Avatar/Rotation: Stiffness: 100, Damping: 5.
• Tooltip Enter/Exit: Stiffness: 260, Damping: 10.

Motion Ranges

• Rotation: Rotates between -45° and +45° based on mouse position.
• Translation: Horizontal offset ranges from -50px to +50px.

Hover States

• Image Scale: Scales to 105% on hover.
• Z-Index: Hovered images move to z-30.
• Transition Duration: 500ms for scaling.

The TargetCursor component automatically disables itself on mobile devices to prevent conflicts with touch interactions. It detects mobile environments based on:

• Touch screen capability
• Screen size (≤768px)
• User agent string

When a mobile device is detected, the component returns null.