1. Find a look you like. Click any shape on this page, drag sliders in the panel on the right until the glass feels right. Every setting is live — adjust IOR, bevel, tint, shadow, all in real time.
2. Copy the JSX. Hit </> Generate code at the bottom of the settings panel. A modal opens with a <Fresnel /> snippet containing your exact values. Click Copy code.
3. Download Fresnel.tsx. Grab it from the GitHub repo and save it somewhere in your React project — typically src/components/Fresnel.tsx. Zero runtime dependencies beyond React. No npm install step.
4. Render it inside a sized container. Import it at the top of any component file, then paste your snippet inside a <div> that has a width, a height, and something visible behind it:

   import Fresnel from "./Fresnel"
   
   export default function Hero() {
     return (
       <div style={{
         backgroundImage: "url('/photo.jpg')",
         width: 600, height: 400,
       }}>
         <div style={{ width: 280, height: 280 }}>
           <Fresnel shape="rectangle" bezelWidth={12} />
         </div>
       </div>
     )
   }

   The outer div holds the content being refracted (the photo). The inner div sets the glass size — Fresnel always fills 100% × 100% of its parent.

There's a Framer-ready version in the repo at /framer/fresnel-framer-js.tsx — same physics, wrapped as a code component. Every setting becomes a property control in Framer's right panel.

1. Grab the file. Download or copy the contents of fresnel-framer-js.tsx from the repo (button below).
2. New code component in Framer. Open Assets → Code → + → New Code Component. Name it whatever you like — Fresnel.js works.
3. Paste the full file. Replace Framer's default scaffold with the TSX. Save with ⌘S.
4. Drag it onto a frame. The component appears under Assets → Code. Drop it onto a frame that has content behind it — image, gradient, or other UI. That's what gets refracted through the glass. Tune props in the right panel.
5. Put content inside the glass (optional). To render anything on top of the refraction — a label, an icon, a Stack — Framer needs that content to live on the artboard outside any page section. Create a Stack or any other layer out there, then select your Fresnel component and use the Content property control to pick that layer. Framer shows a live preview inline.