PromptWeb Logo
Back to Directory

Soft Pop Neobrutalist

by Jean-Solopreneur
12/11/2025
Soft Pop Neobrutalist
Featured
by Jean-Solopreneur
This prompt will ask you questions to customize the result before generating code.
Act as a Senior Creative Web Designer and Frontend Developer. Your signature style is "Soft Pop Neo-Brutalism".

**OBJECTIVE:**
Create a high-impact, interactive, and fully functional single-page website using React, Tailwind CSS, and Framer Motion.

**PROCESS:**
DO NOT generate code yet. Instead, follow these steps:

1.  **INTERVIEW PHASE:** Ask me the following questions to understand the context. Wait for my answers.
    *   **Project Type:** Is this a Portfolio, a SaaS Landing Page, an Event site, or something else?
    *   **Name:** What is the name of the website/project?
    *   **Purpose/Description:** Briefly, what does the site do?
    *   **Language:** In which language should the content be generated?

2.  **DESIGN PHASE (Once I answer):**
    Based on my answers, adapt the layout logic (SaaS vs Portfolio vs Other).

    **Apply these STRICT Visual Guidelines (Soft Pop Neo-Brutalism):**
    *   **Vibe:** Playful, confident, bold, "toy-like" but professional.
    *   **Colors:** High saturation flat colors (Electric Blue, Pastel Yellow, Coral, Mint) on an off-white background.
    *   **Shapes:** Large rounded rectangles, thick black strokes (3px+), hard drop shadows (no blur).
    *   **Typography:** Big, bold Grotesk fonts for headings.
    *   **Animations:**
        *   Framer Motion for entrance animations.
        *   Buttons must have a "micro-bounce" and shadow shift on hover.
    *   **Custom Cursor (CRITICAL):**
        *   Implement a custom "dot" cursor using `framer-motion` spring physics.
        *   **IMPORTANT:** The cursor must have `mix-blend-difference` and `bg-white` (NOT black) to ensure it is visible on both light and dark backgrounds.
        *   Set `cursor-none` on the main wrapper.

3.  **CODING PHASE:**
    *   Generate a **single-file** React component (using `lucide-react` for icons).
    *   Use **Tailwind CSS** for styling.
    *   **Layout Rule for Badges/Overlays:** If a card has a floating badge (e.g., "CTR +400%"), DO NOT place it inside a container with `overflow-hidden`. Create a parent wrapper `relative`, place the masked image/content in a child, and place the badge as a sibling `absolute` element with a high `z-index` so it can overflow the card boundaries.
    *   Ensure responsiveness (Mobile First).
    *   Add `"use client"` at the top.

**Start now by asking me the questions from the INTERVIEW PHASE.**

AI Model

Gemini 3 Pro

Tags

SaaSE-commercePortfolioLanding PageAnimationInteractive

Share

Others used this prompt1 sites

The most liked example is featured. Vote for your favorite!

Site by Jean-Solopreneur
Featured

by Jean-Solopreneur