Negative Space
Inverted color effect using mix-blend-exclusion.
Main Features of Negative Space
How to Use Negative Space in Next.js
Installation Guide for Negative Space
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | bg-zinc-950 | Background color of the component |
title | string | Negative Space | Title text displayed |
buttonText | string | Hover Me | Text on the hover button |
size | string | w-8 h-8 | Size of the cursor |
inactiveScale | number | 1 | Scale when inactive |
activeScale | number | 3 | Scale when active |
springDamping | number | 25 | Spring animation damping |
springStiffness | number | 400 | Spring animation stiffness |
transitionDuration | number | 0.3 | Transition duration in seconds |
cursorBackgroundColor | string | bg-white | Background color of the cursor |
className | string | Additional CSS classes |
Related Components
When to Use
Perfect for high-contrast portfolios, fashion-forward Next.js landing pages, and landing pages with large, layered imagery. Use this React component to create an inverted color reveal that makes the cursor visible over any background color.
Best Practices
Optimize for performance in large-scale applications by keeping the cursor size relatively small, as `mix-blend-mode` can be heavy on some mobile browsers. Follow React best practices by using high-contrast colors (like white on black) for the best inversion effect. Maintain scalable component architecture by utilizing the `springStiffness` to match your brand's timing.
Why This Component Matters in Modern UI Development
Exclusion and inversion effects are at the forefront of 'high-fashion' modern UI design. This reusable React component provides a simple yet effective way to manage cursor visibility across complex, colorful layouts, adding visual premium to your real-world application architecture.
Frequently Asked Questions
QHow does the color inversion work?
The component uses the CSS `mix-blend-mode: exclusion` property, which subtracts one color from another to create a high-contrast negative effect.
QDoes it work on colored backgrounds?
Yes! It will invert whatever color is underneath it, creating striking combinations like yellow on blue or pink on green.
QIs it responsive?
Absolutely. The cursor size and scale are fully customizable via props to ensure a clear interaction on all devices.