Glass Mark 3D

Component

About

Levitating glass mark with real refraction and dispersion, rendered with three.js. Drop in your own .glb or use the built-in rounded plate.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass Mark 3D to your project and fits it to your theme.

Code

How Glass Mark 3D is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { GlassMark3D } from "@/components/ui/glass-mark-3d";

/* Демо: марка висит в воздухе на полосатом фоне со свечением. Полосы тут по
   делу — на ровной заливке преломление не показать, а вертикальные линии
   ломаются в теле формы и читаются сразу. */

export default function GlassMark3DDemo() {
  return (
    <div className="relative h-[560px] w-full overflow-hidden rounded-xl">
      <GlassMark3D float={9} lift={0.035} sway={14} dispersion={10.8} />

      <div className="pointer-events-none absolute inset-x-0 bottom-0 flex items-end justify-between p-6">
        <p className="max-w-[16rem] text-sm leading-relaxed text-white/70">
          Real refraction with dispersion: the background bends inside the
          body, colour fringes ride the edges. The float loops seamlessly.
        </p>
        <span className="text-[11px] uppercase tracking-[0.2em] text-white/45">
          three.js
        </span>
      </div>
    </div>
  );
}