Hover reveal effect

superdesignCC0-1.0Prompt onlyLanding · landingLight · lightLow (display) · lowBlue · blueVivid · vividSerif · serifGeneral · generalProfessional · professional

Source: https://x.com/emilylambert/status/2005113433780617713 Category: Animations & Backgrounds. Prompt author listed upstream: Jason Zhou.

NNorthwind

Product · Pricing

Specimen

Make the work feel finished

One interface, dressed in this style. Compare type, color, radius, and density.

128

Active

4.8

Score

12ms

Edge

Attribution

"Hover reveal effect" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/hover-reveal-effect @ 6c6090694520.

https://github.com/superdesigndev/superdesign-prompts · prompts/hover-reveal-effect · 6c6090694520 · © Superdesign

Prompt

I want to create a personal portfolio landing page for \[YOUR NAME\]. The page should be a full-screen hero section with a large headshot image \[IMAGE ONE\] as the background, centered and covering the entire viewport. My name should appear in the top left corner in a large, elegant serif font (like Playfair Display) with the first and last name stacked on separate lines. In the top right corner, add a "Portfolio" link. At the bottom right, include social media icons for Instagram, X/Twitter, YouTube, and LinkedIn that link to my profiles - use solid filled SVG icons so they're clearly visible.\
\
The main interactive feature should be a blob cursor effect that follows the mouse. When the user hovers over the page, an organic, gooey blob shape should appear and follow the cursor with a slight lag for a smooth, fluid feel. This blob should act as a "reveal" mask that shows a second version of the headshot \[IMAGE TWO\] - so as the user moves their cursor around, they're essentially revealing an alternate image underneath. The blob should have a trailing effect where smaller, fading blob shapes follow behind based on cursor speed - faster movement creates more pronounced trails. Add subtle animated wave lines in the background that respond gently to mouse movement.\
\
All text elements (my name, the Portfolio link, and the social icons) should dynamically invert to white when the blob cursor hovers over them, so they remain visible against the revealed image. The transitions should be smooth with a 300ms duration. Add a subtle parallax effect where elements shift slightly in the opposite direction of cursor movement to create depth. The overall aesthetic should be minimal and sophisticated with a white background, letting the photography and interactive elements be the focal point.

---
"Hover reveal effect" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/hover-reveal-effect @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Hover reveal effect. \"Hover reveal effect\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/hover-reveal-effect @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-hover-reveal-effect",
      "license": "CC0-1.0",
      "attribution": "\"Hover reveal effect\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/hover-reveal-effect @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#f7f5f2"
    },
    "foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "card": {
      "$type": "color",
      "$value": "#f7f5f2"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "primary": {
      "$type": "color",
      "$value": "#1d4ed8"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#e3e1df"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "accent": {
      "$type": "color",
      "$value": "#1d4ed8"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#e8e6e3"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#6b6a68"
    },
    "border": {
      "$type": "color",
      "$value": "#d4d3d0"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#1d4ed8"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

CSS

/* powered by Styledex — https://styledex.dev */
/* "Hover reveal effect" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/hover-reveal-effect @ 6c6090694520. */
:root {
  --background: #f7f5f2;
  --foreground: #1c1917;
  --card: #f7f5f2;
  --card-foreground: #1c1917;
  --primary: #1d4ed8;
  --primary-foreground: #fafaf9;
  --secondary: #e3e1df;
  --secondary-foreground: #1c1917;
  --accent: #1d4ed8;
  --accent-foreground: #fafaf9;
  --muted: #e8e6e3;
  --muted-foreground: #6b6a68;
  --border: #d4d3d0;
  --destructive: #dc2626;
  --ring: #1d4ed8;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

Tailwind

/* powered by Styledex — https://styledex.dev */
/* "Hover reveal effect" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/hover-reveal-effect @ 6c6090694520. */
/** Tailwind theme extend for Hover reveal effect (superdesign-hover-reveal-effect) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#f7f5f2",
        "foreground": "#1c1917",
        "card": "#f7f5f2",
        "primary": "#1d4ed8",
        "primary-foreground": "#fafaf9",
        "secondary": "#e3e1df",
        "accent": "#1d4ed8",
        "muted": "#e8e6e3",
        "border": "#d4d3d0",
        "destructive": "#dc2626",
        "ring": "#1d4ed8"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

shadcn

/* powered by Styledex — https://styledex.dev */
/* "Hover reveal effect" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/hover-reveal-effect @ 6c6090694520. */
@layer base {
:root {
  --background: #f7f5f2;
  --foreground: #1c1917;
  --card: #f7f5f2;
  --card-foreground: #1c1917;
  --primary: #1d4ed8;
  --primary-foreground: #fafaf9;
  --secondary: #e3e1df;
  --secondary-foreground: #1c1917;
  --accent: #1d4ed8;
  --accent-foreground: #fafaf9;
  --muted: #e8e6e3;
  --muted-foreground: #6b6a68;
  --border: #d4d3d0;
  --destructive: #dc2626;
  --ring: #1d4ed8;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}