Glass Frame

3D glass photo frame with realistic reflections and refractions — 6 shapes with HDRI environment mapping

How to add this to your site

Use with Claude Code, Codex, Cursor, etc.

Copy URL or Code

Paste to your AI coding assistant and say:

“Add this glass frame to display my profile photo”

Customize with:

“Use the heart shape”

“Make it swing instead of spin”

“Add a pink glass tint”

Done. Your AI handles the rest.

Make it yours. Adjust shape, glass color, refraction IOR, rotation speed, and environment map. Use shape prop to select: Square, Heart, Oval, Circle, Hexagon, or Octagon.

// GlassFrame Component - Install: npm install three @types/three
// Creates a 3D glass photo frame with realistic reflections

"use client";

import React, { useEffect, useRef } from "react";

export type GlassShape = "Square" | "Heart" | "Oval" | "Circle" | "Hexagon" | "Octagon";
export type EnvMapPreset = "Royal Esplanade" | "Studio Small" | "Moonless Golf" | "Overcast";

export interface GlassFrameProps {
  width?: number;
  height?: number;
  shape?: GlassShape;
  photoScale?: number;
  imageUrl?: string;
  envMap?: EnvMapPreset;
  glassColor?: string;
  envIntensity?: number;
  refractionIOR?: number;
  glassOpacity?: number;
  backgroundColor?: string;
  autoRotate?: boolean;
  yAxisMode?: "Spin" | "Swing";
  yAxisSpeed?: number;
  xAxisEnabled?: boolean;
  zAxisEnabled?: boolean;
  globalSpeed?: number;
  className?: string;
}

export const GLASS_SHAPES: GlassShape[] = ["Square", "Heart", "Oval", "Circle", "Hexagon", "Octagon"];

// Component uses Three.js with:
// - MeshPhysicalMaterial for realistic glass (transmission, IOR, clearcoat)
// - HDRI environment maps from Polyhaven for reflections
// - RoundedBoxGeometry and ExtrudeGeometry for shapes
// - OrbitControls for interactive rotation
// Full implementation available at component URL

import dynamic from "next/dynamic";

const GlassFrame = dynamic(() => import("@/components/GlassFrame"), {
  ssr: false,
  loading: () => <div className="h-[400px] bg-gray-900" />,
});

// Basic usage with default square shape
export default function ProfilePhoto() {
  return (
    <GlassFrame
      width={400}
      height={400}
      imageUrl="/my-photo.jpg"
      shape="Square"
    />
  );
}

// Heart shaped frame with pink tint
export function ValentinePhoto() {
  return (
    <GlassFrame
      width={400}
      height={400}
      imageUrl="/couple-photo.jpg"
      shape="Heart"
      glassColor="#ff69b4"
      yAxisMode="Swing"
      yAxisSpeed={0.3}
    />
  );
}

// Hexagon frame with studio lighting
export function StudioPortrait() {
  return (
    <GlassFrame
      width={500}
      height={500}
      imageUrl="/portrait.jpg"
      shape="Hexagon"
      envMap="Studio Small"
      envIntensity={1.5}
      backgroundColor="#1a1a1a"
    />
  );
}