obsidian-gate-loader

A sophisticated pre-loader component designed to elevate the initial user perception of a website. This loader features a "Kinetic Gate" mechanism, where layers of deep obsidian and silver-toned typography synchronize with the site's loading state. It transitions from a state of focused minimalism to a full-page reveal using heavy easing, reflecting an air of mystery and technical mastery. It is engineered for brands that value "First Impression" authority and want to mask high-fidelity asset loading with an engaging, cinematic experience.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds obsidian-gate-loader to your project and fits it to your theme.

import { Component } from "@/components/ui/obsidian-gate-loader";

export default function DemoOne() {
  return <Component />;
}