Parallax Stars Background

superdesignCC0-1.0Prompt onlyLanding · landingGradient · gradientPixel · pixelFuturistic · futuristicLight · lightMedium · mediumBlue · blueMedium · mediumSerif · serifGeneral · general

A mesmerizing space-themed background with animated parallax pixel stars and a radial gradient atmosphere. Features three layers of stars moving at different speeds to create depth. 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

"Parallax Stars Background" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/parallax-stars-background @ 6c6090694520.

https://github.com/superdesigndev/superdesign-prompts · prompts/parallax-stars-background · 6c6090694520 · © Superdesign

Prompt

This is a reference implementation of a parallax stars background
~~~/README.md
# Parallax Stars Background
A mesmerizing space-themed background component with animated parallax pixel stars and a radial gradient atmosphere.
## Features
- **Pure CSS/JS Animation**: Uses efficient `box-shadow` rendering for thousands of particles.
- **Parallax Effect**: Three layers of stars moving at different speeds to create depth.
- **Radial Gradient Atmosphere**: Creates a deep space feel.
- **Customizable**: Adjustable speed and title text.
- **Responsive**: Adapts to screen size.
## Usage
```tsx
import { ParallaxStarsBackground } from '@/sd-components/a17695b3-944f-4e4b-9d72-b0cfd61b9bb8';
function App() {
  return (
    <ParallaxStarsBackground
      title="MY AWESOME\nSPACE APP"
      speed={1.5}
    >
      <button className="px-6 py-2 border border-white text-white hover:bg-white hover:text-black transition-colors rounded-full uppercase tracking-widest text-sm">
        Enter the Void
      </button>
    </ParallaxStarsBackground>
  );
}
```
## Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `string` | "PURE CSS\nPARALLAX PIXEL STARS" | Main title text. Use `\n` for line breaks. |
| `children` | `ReactNode` | undefined | Optional content to render below the title. |
| `className` | `string` | "" | Additional classes for the container. |
| `speed` | `number` | 1 | Animation speed multiplier. Higher is faster. |
~~~
~~~/src/App.tsx
import React from 'react';
import { ParallaxStarsBackground } from './Component';
export default function App() {
  return (
    <div className="w-full min-h-screen">
      <ParallaxStarsBackground
        speed={1}
      />
    </div>
  );
}
~~~
~~~/package.json
{
  "name": "parallax-stars-background",
  "version": "1.0.0",
  "description": "A mesmerizing space-themed background with animated parallax pixel stars and a radial gradient atmosphere.",
  "main": "src/Component.tsx",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "lucide-react": "^0.344.0",
    "framer-motion": "^11.0.8",
    "clsx": "^2.1.0",
    "tailwind-merge": "^2.2.1"
  }
}
~~~
~~~/src/Component.tsx
import React, { useMemo } from 'react';
// Types for the component props
export interface ParallaxStarsBackgroundProps {
  /**
   * Title text to display in the center
   * @default "PURE CSS PARALLAX PIXEL STARS"
   */
  title?: string;
  /**
   * Subtitle or additional content
   */
  children?: React.ReactNode;
  /**
   * Class name for the container
   */
  className?: string;
  /**
   * Speed multiplier for the animation
   * @default 1
   */
  speed?: number;
}
// Helper to generate random box shadows
const generateBoxShadows = (n: number) => {
  let value = `${Math.floor(Math.random() * 2000)}px ${Math.floor(Math.random() * 2000)}px #FFF`;
  for (let i = 2; i <= n; i++) {
    value += `, ${Math.floor(Math.random() * 2000)}px ${Math.floor(Math.random() * 2000)}px #FFF`;
  }
  return value;
};
export function ParallaxStarsBackground({
  title = "PURE CSS\nPARALLAX PIXEL STARS",
  children,
  className = "",
  speed = 1
}: ParallaxStarsBackgroundProps) {
  // Memoize shadows so they don't regenerate on re-renders
  const shadowsSmall = useMemo(() => generateBoxShadows(700), []);
  const shadowsMedium = useMemo(() => generateBoxShadows(200), []);
  const shadowsBig = useMemo(() => generateBoxShadows(100), []);
  return (
    <div className={`relative w-full h-screen overflow-hidden bg-[#090A0F] font-['Lato'] ${className}`}>
      {/* Inline styles for the gradient and animations */}
      <style>{`
        .bg-radial-space {
          background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
        }
        @keyframes animStar {
          from { transform: translateY(0px); }
          to { transform: translateY(-2000px); }
        }
        .text-gradient-clip {
          background: linear-gradient(to bottom, white 0%, #38495a 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      `}</style>
      {/* Background Gradient */}
      <div className="absolute inset-0 bg-radial-space z-0" />
      {/* Stars Layer 1 (Small) */}
      <div
        className="absolute left-0 top-0 w-[1px] h-[1px] bg-transparent z-10 animate-[animStar_50s_linear_infinite]"
        style={{
          boxShadow: shadowsSmall,
          animationDuration: `${50 / speed}s`
        }}
      >
        <div
          className="absolute top-[2000px] w-[1px] h-[1px] bg-transparent"
          style={{ boxShadow: shadowsSmall }}
        />
      </div>
      {/* Stars Layer 2 (Medium) */}
      <div
        className="absolute left-0 top-0 w-[2px] h-[2px] bg-transparent z-10 animate-[animStar_100s_linear_infinite]"
        style={{
          boxShadow: shadowsMedium,
          animationDuration: `${100 / speed}s`
        }}
      >
        <div
          className="absolute top-[2000px] w-[2px] h-[2px] bg-transparent"
          style={{ boxShadow: shadowsMedium }}
        />
      </div>
      {/* Stars Layer 3 (Big) */}
      <div
        className="absolute left-0 top-0 w-[3px] h-[3px] bg-transparent z-10 animate-[animStar_150s_linear_infinite]"
        style={{
          boxShadow: shadowsBig,
          animationDuration: `${150 / speed}s`
        }}
      >
        <div
          className="absolute top-[2000px] w-[3px] h-[3px] bg-transparent"
          style={{ boxShadow: shadowsBig }}
        />
      </div>
      {/* Title Content */}
      <div className="absolute top-1/2 left-0 right-0 -mt-[60px] text-center z-20 px-4">
        <h1 className="font-light text-[30px] md:text-[50px] tracking-[10px] text-white leading-tight">
          {title.split('\n').map((line, i) => (
            <React.Fragment key={i}>
              <span className={i === 0 ? "text-gradient-clip" : "text-gradient-clip"}>
                {line}
              </span>
              {i < title.split('\n').length - 1 && <br />}
            </React.Fragment>
          ))}
        </h1>
        {children && <div className="mt-8">{children}</div>}
      </div>
    </div>
  );
}
export default ParallaxStarsBackground;
~~~
Implementation Guidelines
1. Analyze the component structure, styling, animation implementations
2. Review the component's arguments and state
3. Think through what is the best place to adopt this component/style into the design we are doing
4. Then adopt the component/design to our current system
Help me integrate this into my design

---
"Parallax Stars Background" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/parallax-stars-background @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

DTCG

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Parallax Stars Background. \"Parallax Stars Background\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/parallax-stars-background @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-parallax-stars-background",
      "license": "CC0-1.0",
      "attribution": "\"Parallax Stars Background\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/parallax-stars-background @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "foreground": {
      "$type": "color",
      "$value": "#090a0f"
    },
    "card": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#090a0f"
    },
    "primary": {
      "$type": "color",
      "$value": "#090a0f"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#1b2735"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#090a0f"
    },
    "accent": {
      "$type": "color",
      "$value": "#1b2735"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#f0f0f0"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#5f6063"
    },
    "border": {
      "$type": "color",
      "$value": "#dbdbdb"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#090a0f"
    }
  },
  "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 */
/* "Parallax Stars Background" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/parallax-stars-background @ 6c6090694520. */
:root {
  --background: #ffffff;
  --foreground: #090a0f;
  --card: #ffffff;
  --card-foreground: #090a0f;
  --primary: #090a0f;
  --primary-foreground: #fafaf9;
  --secondary: #1b2735;
  --secondary-foreground: #090a0f;
  --accent: #1b2735;
  --accent-foreground: #fafaf9;
  --muted: #f0f0f0;
  --muted-foreground: #5f6063;
  --border: #dbdbdb;
  --destructive: #dc2626;
  --ring: #090a0f;
  --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 */
/* "Parallax Stars Background" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/parallax-stars-background @ 6c6090694520. */
/** Tailwind theme extend for Parallax Stars Background (superdesign-parallax-stars-background) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#ffffff",
        "foreground": "#090a0f",
        "card": "#ffffff",
        "primary": "#090a0f",
        "primary-foreground": "#fafaf9",
        "secondary": "#1b2735",
        "accent": "#1b2735",
        "muted": "#f0f0f0",
        "border": "#dbdbdb",
        "destructive": "#dc2626",
        "ring": "#090a0f"
      },
      "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 */
/* "Parallax Stars Background" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/parallax-stars-background @ 6c6090694520. */
@layer base {
:root {
  --background: #ffffff;
  --foreground: #090a0f;
  --card: #ffffff;
  --card-foreground: #090a0f;
  --primary: #090a0f;
  --primary-foreground: #fafaf9;
  --secondary: #1b2735;
  --secondary-foreground: #090a0f;
  --accent: #1b2735;
  --accent-foreground: #fafaf9;
  --muted: #f0f0f0;
  --muted-foreground: #5f6063;
  --border: #dbdbdb;
  --destructive: #dc2626;
  --ring: #090a0f;
  --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);
}
}