Learn Framer - 10 Code Examples & CST Typing Practice Test

Framer is a modern web-based design and prototyping tool that allows designers and developers to create interactive, animated, and responsive UI prototypes with code or visual editing. It combines design, animation, and React-based components into a single workflow.

View all 10 Framer code examples →

Simple Framer Component Framer Fade In Box Framer Scale Tap Framer Drag Box Framer Hover Animation Framer Spring Bouncer Framer Looping Animation Framer Rotation Cycle Framer LayoutAnimation Framer Gesture Combo

Learn FRAMER with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple Framer Component

# framer/demo/Component.jsx
import * as React from 'react';
import { Frame, animate } from 'framer';

export function MovingBox() {
    const [x, setX] = React.useState(0);
    React.useEffect(() => {
        animate(x, 300, { duration: 2, onUpdate: v => setX(v) });
    }, []);
    return <Frame width={100} height={100} backgroundColor="blue" x={x} />;
}

A basic Framer component that animates a box moving horizontally on render.

Let’s Try →

Framer Fade In Box

# framer/demo/FadeIn.jsx
import * as React from 'react';
import { Frame, useAnimation } from 'framer';

export function FadeInBox() {
    const controls = useAnimation();
    React.useEffect(() => {
        controls.start({ opacity: 1, duration: 1.5 });
    }, []);
    return <Frame width={120} height={120} backgroundColor="red" opacity={0} animate={controls} />;
}

A box that fades in smoothly using Framer motion values.

Let’s Try →

Framer Scale Tap

# framer/demo/ScaleTap.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function ScaleTap() {
    return (
        <Frame width={120} height={120} backgroundColor="green" whileTap={{ scale: 0.8 }} />
    );
}

A box that scales when tapped.

Let’s Try →

Framer Drag Box

# framer/demo/DragBox.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function DragBox() {
    return <Frame width={100} height={100} drag backgroundColor="orange" />;
}

A draggable Framer box.

Let’s Try →

Framer Hover Animation

# framer/demo/HoverRotate.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function HoverRotate() {
    return (
        <Frame
        width={120}
        height={120}
        backgroundColor="purple"
        whileHover={{ rotate: 20, backgroundColor: 'pink' }}
        />
    );
}

A hover effect that changes color and rotates.

Let’s Try →

Framer Spring Bouncer

# framer/demo/SpringBounce.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function SpringBounce() {
    return <Frame width={100} height={100} backgroundColor="cyan" animate={{ y: 100 }} transition={{ type: 'spring', stiffness: 150 }} />;
}

A box that uses a spring bounce animation on mount.

Let’s Try →

Framer Looping Animation

# framer/demo/Looping.jsx
import * as React from 'react';
import { Frame, useAnimation } from 'framer';

export function LoopingBox() {
    const controls = useAnimation();
    React.useEffect(() => {
        async function loop() {
        while (true) {
        await controls.start({ x: 150, duration: 1 });
        await controls.start({ x: 0, duration: 1 });
        }
        }
        loop();
    }, []);
    return <Frame width={100} height={100} backgroundColor="yellow" animate={controls} />;
}

A looping left-right animation.

Let’s Try →

Framer Rotation Cycle

# framer/demo/RotateCycle.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function RotateCycle() {
    return <Frame width={120} height={120} backgroundColor="teal" animate={{ rotate: 360 }} transition={{ repeat: Infinity, duration: 2 }} />;
}

A rotating square that loops forever.

Let’s Try →

Framer LayoutAnimation

# framer/demo/LayoutAnimation.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function LayoutAnimation() {
    const [big, setBig] = React.useState(false);
    return (
        <Frame
        backgroundColor="brown"
        layout
        width={big ? 200 : 100}
        height={big ? 200 : 100}
        onTap={() => setBig(!big)}
        />
    );
}

A layout-animating box that changes size on click.

Let’s Try →

Framer Gesture Combo

# framer/demo/GestureCombo.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function GestureCombo() {
    return (
        <Frame
        width={140}
        height={140}
        backgroundColor="silver"
        drag
        whileHover={{ scale: 1.1 }}
        whileTap={{ rotate: 15 }}
        />
    );
}

Combines tap, hover, and drag gestures.

Let’s Try →

Frequently Asked Questions about Framer

What is Framer?

What are the primary use cases for Framer?

Interactive UI/UX prototypes. Design-to-code workflows with React. Animated web and mobile components. Responsive and adaptive layout testing. Rapid testing of user interactions and gestures

What are the strengths of Framer?

Rapid creation of interactive prototypes. Seamless design-to-code workflow. Supports both visual editing and React coding. Powerful animation and motion capabilities. Responsive layout and adaptive design support

What are the limitations of Framer?

Requires familiarity with React for code-driven components. Complex animations may require JavaScript knowledge. Limited 3D or low-level graphics support. Not a full production-grade front-end framework. Dependent on Framer ecosystem for some advanced features

How can I practice Framer typing speed?

CodeSpeedTest offers 10+ real Framer code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Simple Framer Component

# framer/demo/Component.jsx
import * as React from 'react';
import { Frame, animate } from 'framer';

export function MovingBox() {
    const [x, setX] = React.useState(0);
    React.useEffect(() => {
        animate(x, 300, { duration: 2, onUpdate: v => setX(v) });
    }, []);
    return <Frame width={100} height={100} backgroundColor="blue" x={x} />;
}

A basic Framer component that animates a box moving horizontally on render.

Let’s Try →

Framer Fade In Box

# framer/demo/FadeIn.jsx
import * as React from 'react';
import { Frame, useAnimation } from 'framer';

export function FadeInBox() {
    const controls = useAnimation();
    React.useEffect(() => {
        controls.start({ opacity: 1, duration: 1.5 });
    }, []);
    return <Frame width={120} height={120} backgroundColor="red" opacity={0} animate={controls} />;
}

A box that fades in smoothly using Framer motion values.

Let’s Try →

Framer Scale Tap

# framer/demo/ScaleTap.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function ScaleTap() {
    return (
        <Frame width={120} height={120} backgroundColor="green" whileTap={{ scale: 0.8 }} />
    );
}

A box that scales when tapped.

Let’s Try →

Framer Drag Box

# framer/demo/DragBox.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function DragBox() {
    return <Frame width={100} height={100} drag backgroundColor="orange" />;
}

A draggable Framer box.

Let’s Try →

Framer Hover Animation

# framer/demo/HoverRotate.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function HoverRotate() {
    return (
        <Frame
        width={120}
        height={120}
        backgroundColor="purple"
        whileHover={{ rotate: 20, backgroundColor: 'pink' }}
        />
    );
}

A hover effect that changes color and rotates.

Let’s Try →

Framer Spring Bouncer

# framer/demo/SpringBounce.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function SpringBounce() {
    return <Frame width={100} height={100} backgroundColor="cyan" animate={{ y: 100 }} transition={{ type: 'spring', stiffness: 150 }} />;
}

A box that uses a spring bounce animation on mount.

Let’s Try →

Framer Looping Animation

# framer/demo/Looping.jsx
import * as React from 'react';
import { Frame, useAnimation } from 'framer';

export function LoopingBox() {
    const controls = useAnimation();
    React.useEffect(() => {
        async function loop() {
        while (true) {
        await controls.start({ x: 150, duration: 1 });
        await controls.start({ x: 0, duration: 1 });
        }
        }
        loop();
    }, []);
    return <Frame width={100} height={100} backgroundColor="yellow" animate={controls} />;
}

A looping left-right animation.

Let’s Try →

Framer Rotation Cycle

# framer/demo/RotateCycle.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function RotateCycle() {
    return <Frame width={120} height={120} backgroundColor="teal" animate={{ rotate: 360 }} transition={{ repeat: Infinity, duration: 2 }} />;
}

A rotating square that loops forever.

Let’s Try →

Framer LayoutAnimation

# framer/demo/LayoutAnimation.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function LayoutAnimation() {
    const [big, setBig] = React.useState(false);
    return (
        <Frame
        backgroundColor="brown"
        layout
        width={big ? 200 : 100}
        height={big ? 200 : 100}
        onTap={() => setBig(!big)}
        />
    );
}

A layout-animating box that changes size on click.

Let’s Try →

Framer Gesture Combo

# framer/demo/GestureCombo.jsx
import * as React from 'react';
import { Frame } from 'framer';

export function GestureCombo() {
    return (
        <Frame
        width={140}
        height={140}
        backgroundColor="silver"
        drag
        whileHover={{ scale: 1.1 }}
        whileTap={{ rotate: 15 }}
        />
    );
}

Combines tap, hover, and drag gestures.

Let’s Try →

Frequently Asked Questions about Framer

What is Framer?

What are the primary use cases for Framer?

Interactive UI/UX prototypes. Design-to-code workflows with React. Animated web and mobile components. Responsive and adaptive layout testing. Rapid testing of user interactions and gestures

What are the strengths of Framer?

What are the limitations of Framer?

How can I practice Framer typing speed?

CodeSpeedTest offers 10+ real Framer code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.