Emili retweeted
The Framer MCP is here. Design, build, and update your site with AI tools like ChatGPT, Claude, Cursor, and Grok. Without giving up Framer’s flexibility, reliability, and control. framer.link/mcp
Emili retweeted
From interactive travel guides to brand campaigns, @Telegraph uses Framer to design and publish independently. Its Commercial Design team has already launched over 20 campaigns, moving faster without relying on developers.
Build a full-screen "Themed Scene" component (1200×1000) with two variants, Light (white background, black lines) and Dark (black background, white lines). It switches between them with a 0.4s ease-in-out tween. Put it on the home page so it fills the width.3D OBJECTS (built from Framer 3D transforms, not images)Each object uses the same three-layer nesting:1. Outer "stage" frame: sets perspective. A hand-tracking override that handles grab, move and scale goes here.2. "Rotation" frame: keeps children in 3D. A hand-tracking override that handles rotation goes here.3. Object frame: keeps children in 3D, with a resting tilt.a) Cube: stage 424×424, perspective 1600px. Rotation frame 300×300, centered. Cluster tilted -28° on X and 36° on Y. Inside it, one 150px cube built from 6 faces with 1.5px black outlines and no fill: front: pushed forward 75px · back: turned 180° on Y and pushed back 75px right: shifted right 75px and turned 90° on Y · left: shifted left 75px and turned -90° on Y top: shifted up 75px and turned 90° on X · bottom: shifted down 75px and turned -90° on Xb) Box: stage 282×282, perspective 1200px. A 120w × 150h × 200d box tilted -22° on X and 38° on Y. Its faces are filled with the variant's background color and outlined, so the box reads as solid.c) Diamond (octahedron wireframe): stage 322×308, perspective 1600px. A 281px object turned -90° on Z. It's made of 12 lines, each 1.5px thick, placed freely and positioned with sideways turns, Z turns and depth offsets so they meet at 6 points. Edges at the back are lighter or hidden.Place the three objects loosely across the canvas so they don't overlap.LIGHT SWITCHA 120px-wide vertical stack with 16px rounded corners. It holds an "on" switch drawing, an "off" switch drawing and a label ("Lights on" / "Lights off"). Clicking it toggles the Light and Dark variants. A hand-press override goes on it.HAND TRACKING (one code file: three overrides plus a toggle button)- Toggle button: a pill-shaped "Start hand tracking" / "Stop hand tracking" button centered at the bottom. It starts the webcam and Google MediaPipe hand tracking (two hands, GPU with CPU fallback). A mirrored 240×180 webcam preview sits in the bottom-right corner with the hand skeleton drawn on top. Each hand gets an on-screen cursor: the left hand is a solid dot, the right hand a dashed ring, and the cursor fills in while it's holding or rotating something.- Gestures: • LEFT hand pinch (thumb to index) on an object = grab it. Moving the hand moves the object with a spring. Widening or tightening the pinch scales it (0.25× to 4×). • To let go, open the palm or touch thumb to middle finger. The object then rewinds about 450ms so it doesn't jump at the end. • RIGHT hand pinch on an object = rotate it. Hand movement turns it freely (about one full turn per 500px). Twisting the wrist turns it on the third axis. Rotation is in screen space so turns accumulate without limit and stay smooth at any angle, with no flipping. • Either hand pinching over the light switch = click it.- Make the tracking feel stable: smooth out jitter, use separate thresholds for starting and ending a pinch, and require the fingers to relax before a hand can grab again.- Add an option to swap left and right hands and an option
Build a full-screen "Themed Scene" component (1200×1000) with two variants, Light (white background, black lines) and Dark (black background, white lines). It switches between them with a 0.4s ease-in-out tween. Put it on the home page so it fills the width.3D OBJECTS (built from Framer 3D transforms, not images)Each object uses the same three-layer nesting:1. Outer "stage" frame: sets perspective. A hand-tracking override that handles grab, move and scale goes here.2. "Rotation" frame: keeps children in 3D. A hand-tracking override that handles rotation goes here.3. Object frame: keeps children in 3D, with a resting tilt.a) Cube: stage 424×424, perspective 1600px. Rotation frame 300×300, centered. Cluster tilted -28° on X and 36° on Y. Inside it, one 150px cube built from 6 faces with 1.5px black outlines and no fill: front: pushed forward 75px · back: turned 180° on Y and pushed back 75px right: shifted right 75px and turned 90° on Y · left: shifted left 75px and turned -90° on Y top: shifted up 75px and turned 90° on X · bottom: shifted down 75px and turned -90° on Xb) Box: stage 282×282, perspective 1200px. A 120w × 150h × 200d box tilted -22° on X and 38° on Y. Its faces are filled with the variant's background color and outlined, so the box reads as solid.c) Diamond (octahedron wireframe): stage 322×308, perspective 1600px. A 281px object turned -90° on Z. It's made of 12 lines, each 1.5px thick, placed freely and positioned with sideways turns, Z turns and depth offsets so they meet at 6 points. Edges at the back are lighter or hidden.Place the three objects loosely across the canvas so they don't overlap.LIGHT SWITCHA 120px-wide vertical stack with 16px rounded corners. It holds an "on" switch drawing, an "off" switch drawing and a label ("Lights on" / "Lights off"). Clicking it toggles the Light and Dark variants. A hand-press override goes on it.HAND TRACKING (one code file: three overrides plus a toggle button)- Toggle button: a pill-shaped "Start hand tracking" / "Stop hand tracking" button centered at the bottom. It starts the webcam and Google MediaPipe hand tracking (two hands, GPU with CPU fallback). A mirrored 240×180 webcam preview sits in the bottom-right corner with the hand skeleton drawn on top. Each hand gets an on-screen cursor: the left hand is a solid dot, the right hand a dashed ring, and the cursor fills in while it's holding or rotating something.- Gestures: • LEFT hand pinch (thumb to index) on an object = grab it. Moving the hand moves the object with a spring. Widening or tightening the pinch scales it (0.25× to 4×). • To let go, open the palm or touch thumb to middle finger. The object then rewinds about 450ms so it doesn't jump at the end. • RIGHT hand pinch on an object = rotate it. Hand movement turns it freely (about one full turn per 500px). Twisting the wrist turns it on the third axis. Rotation is in screen space so turns accumulate without limit and stay smooth at any angle, with no flipping. • Either hand pinching over the light switch = click it.- Make the tracking feel stable: smooth out jitter, use separate thresholds for starting and ending a pinch, and require the fingers to relax before a hand can grab again.- Add an option to swap left and right hands and an option
Check out all the amazing things we’ve shipped last month ✌️ (Experts, there’s a surprise for you at the end)
Made a quick walkthrough to help you get started with skills in Framer. Learn to create your own, add pre-made skills, and reuse them across your project ✌️
I filmed a quick tutorial on how to build the folding slider with the Framer Agent. Check it out!