Crazy Website Effect with Framer + Midjourney + Depth Mapping (Full Tutorial)

✔︎ Framer University: https://frameruni.link/yt ✔︎ Create a free Framer account: https://framer.university/free-account In this Framer tutorial, I'm showing you how to create "impossible" 3D scan effects using AI and a special component. You'll learn how to combine Midjourney, depth maps, and interactive cards to create mind-bending visuals that shouldn't be possible in Framer. Perfect for pushing the boundaries of what's possible in web design. → Remix the tutorial project: https://framer.university/resources/3... 00:00 - Introduction & Demo of 3D Scan Effect 01:05 - Inspiration from Worse.sh Website 02:15 - Overview of the Custom Component & Use Cases 04:00 - Generating Images with MidJourney 06:38 - Editing & Simplifying Artwork in Pixelmator Pro 09:56 - Preparing Images for Depth Map Generation 12:00 - Creating a Depth Map with Online Generator 13:58 - Setting Up the Component in Framer 15:20 - Customizing Colors, Gradients, and Animations 16:59 - Adjusting Resolution, Style, and Looping Options 17:47 - Building the Card Component Structure 20:01 - Adding Overlays, Text, and Parallax Effects 22:03 - Using Preserve 3D and Depth for Realistic Layers 25:36 - Setting Hover States & Pointer Events 26:17 - Connecting the Card to 3D Look Component 28:08 - Fine-Tuning Perspective & Parallax Floating 29:47 - Additional Examples & Creative Use Cases 30:31 - Outro & Resources Follow me on: X:   / learnframer   Instagram:   / framer.university