Search
Search
Workshop
Your AI for advanced, customizable components for your site. Unlock limitless dev-level power just by describing it.
Workshop
|
Text Scrambler
Analog Clock
Scroll Progress
Number Counter
Generate in seconds
Open your project, hit ⌘K, and launch Workshop. Type out what you want to build — tweak the details as you go. Everything stays editable.
![](data:image/svg+xml,<svg aria-label="AI" display="block" role="presentation" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M 1.167 3.267 C 2.226 3.055 3.055 2.226 3.267 1.167 L 3.267 1.167 C 3.318 0.912 3.682 0.912 3.733 1.167 L 3.733 1.167 C 3.945 2.226 4.774 3.055 5.833 3.267 L 5.833 3.267 C 6.088 3.318 6.088 3.682 5.833 3.733 L 5.833 3.733 C 4.774 3.945 3.945 4.774 3.733 5.833 L 3.733 5.833 C 3.682 6.088 3.318 6.088 3.267 5.833 L 3.267 5.833 C 3.055 4.774 2.226 3.945 1.167 3.733 L 1.167 3.733 C 0.912 3.682 0.912 3.318 1.167 3.267 Z" fill="rgb(255, 255, 255)" height="7px" id="GygmdMrBU" opacity="0.5" transform="translate(13 0)" width="7px"/><path d="M 6.552 9.69 C 8.135 9.373 9.373 8.135 9.69 6.552 L 10.389 3.056 C 10.522 2.388 11.478 2.388 11.611 3.056 L 12.31 6.552 C 12.627 8.135 13.865 9.373 15.448 9.69 L 18.944 10.389 C 19.612 10.522 19.612 11.478 18.944 11.611 L 15.448 12.31 C 13.865 12.627 12.627 13.865 12.31 15.448 L 11.611 18.944 C 11.478 19.612 10.522 19.612 10.389 18.944 L 9.69 15.448 C 9.373 13.865 8.135 12.627 6.552 12.31 L 3.056 11.611 C 2.388 11.478 2.388 10.522 3.056 10.389 Z" fill="rgb(255, 255, 255)" height="22px" id="uei3SV0gS" opacity="1" transform="translate(-2 0)" width="22px"/></svg>)
Crypto Price
Copy
Make a CryptoPrice component that fetches live prices from the CoinGecko API. Users can select a popular coin (BTC, ETH, SOL, DOGE, ADA) or enter a custom ticker. Show the coin icon with a fallback if it fails. Include toggles for abbreviated prices, currency symbol, currency code, and icon visibility. Add controls for font, colors, padding, border (style, color, width per side), icon size, icon background, and spacing between icon and text. Layout should place icon and price side by side and size to fit content.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Crypto Price
Copy
Make a CryptoPrice component that fetches live prices from the CoinGecko API. Users can select a popular coin (BTC, ETH, SOL, DOGE, ADA) or enter a custom ticker. Show the coin icon with a fallback if it fails. Include toggles for abbreviated prices, currency symbol, currency code, and icon visibility. Add controls for font, colors, padding, border (style, color, width per side), icon size, icon background, and spacing between icon and text. Layout should place icon and price side by side and size to fit content.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Glow Effect
Copy
Make a Component that displays large text with a multi-layered blurred shadow effect, where mouse position controls shadow direction. Includes optional gradient glow between two colors. Inspired by HTML/CSS/JS.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Glow Effect
Copy
Make a Component that displays large text with a multi-layered blurred shadow effect, where mouse position controls shadow direction. Includes optional gradient glow between two colors. Inspired by HTML/CSS/JS.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Text Scramble
Copy
Make a text scrambler effect where each character animates to reveal a word that I can customize.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Text Scramble
Copy
Make a text scrambler effect where each character animates to reveal a word that I can customize.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Scroll Progress
Copy
Make a simple progress bar where I can customize colors and radius that progresses as I scroll my page.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Scroll Progress
Copy
Make a simple progress bar where I can customize colors and radius that progresses as I scroll my page.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Image Tilt
Copy
Make a 3D tilt card with editable image on hover. The card should tilt based on my cursor position. Include the shadow in the transform.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Image Tilt
Copy
Make a 3D tilt card with editable image on hover. The card should tilt based on my cursor position. Include the shadow in the transform.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Before & After
Copy
Create an Image Comparison Slider component with two images, a draggable handle that stays centered vertically and updates image reveal as you drag, customizable handle size, radius, and padding (for easier grabbing), and optional left/right arrows with adjustable color, size, and offset.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Before & After
Copy
Create an Image Comparison Slider component with two images, a draggable handle that stays centered vertically and updates image reveal as you drag, customizable handle size, radius, and padding (for easier grabbing), and optional left/right arrows with adjustable color, size, and offset.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Counter
Copy
Create a Number Counter component that animates from a start to an end value, with customizable duration, delay, decimals, easing, font, alignment, and color. It should only animate when in view, with an option to reset on re-entry. Support auto-start, looping, and content-based sizing.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Counter
Copy
Create a Number Counter component that animates from a start to an end value, with customizable duration, delay, decimals, easing, font, alignment, and color. It should only animate when in view, with an option to reset on re-entry. Support auto-start, looping, and content-based sizing.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Analog Clock
Copy
Make an analog clock that tells the time and works well on dark backgrounds. Make it minimal.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Analog Clock
Copy
Make an analog clock that tells the time and works well on dark backgrounds. Make it minimal.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Mouse Trail
Copy
Create a Mouse Trail component that displays fading dots following the cursor. Include properties for dot color, size, spacing, trail length, fade duration, and background color. Dots should be spaced evenly based on movement distance and fade out over time.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Mouse Trail
Copy
Create a Mouse Trail component that displays fading dots following the cursor. Include properties for dot color, size, spacing, trail length, fade duration, and background color. Dots should be spaced evenly based on movement distance and fade out over time.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
The built-in Workshop in Framer makes it easy to create advanced components—like visual effects, cookie banners, tabs, and more—without writing any code. It responds to a growing need among designers and developers who’ve been using AI tools to prototype components from scratch. Instead of starting with raw code, Workshop offers a faster, more focused way to build directly within Framer.
It’s designed to support rapid iteration, with advanced models that allow for quick updates, rollbacks, and a smooth, familiar interface. Generated components come with built-in property controls and automatically match your canvas styles, including fonts and colors, so they’re ready to use and easy to customize. Under the hood, the Workshop applies best practices for performance, memory efficiency, and offscreen rendering—so you can focus on design without worrying about technical debt.
Once a component is ready, it can be reused, shared, or even sold. And because the Workshop is built as a plugin, there’s a plan to open-source it soon—giving the Framer community the opportunity to extend and improve it together.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.
Reading Time
Copy
Create a Reading Time Calculator component that estimates reading time based on a given text input, assuming a default speed of 200 words per minute. Strip HTML tags from the text, and display the result with optional prefix/suffix. Allow customization of words-per-minute, font, and text color. The component should size automatically to fit its content.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
The built-in Workshop in Framer makes it easy to create advanced components—like visual effects, cookie banners, tabs, and more—without writing any code. It responds to a growing need among designers and developers who’ve been using AI tools to prototype components from scratch. Instead of starting with raw code, Workshop offers a faster, more focused way to build directly within Framer.
It’s designed to support rapid iteration, with advanced models that allow for quick updates, rollbacks, and a smooth, familiar interface. Generated components come with built-in property controls and automatically match your canvas styles, including fonts and colors, so they’re ready to use and easy to customize. Under the hood, the Workshop applies best practices for performance, memory efficiency, and offscreen rendering—so you can focus on design without worrying about technical debt.
Once a component is ready, it can be reused, shared, or even sold. And because the Workshop is built as a plugin, there’s a plan to open-source it soon—giving the Framer community the opportunity to extend and improve it together.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.
Reading Time
Copy
Create a Reading Time Calculator component that estimates reading time based on a given text input, assuming a default speed of 200 words per minute. Strip HTML tags from the text, and display the result with optional prefix/suffix. Allow customization of words-per-minute, font, and text color. The component should size automatically to fit its content.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Generate in seconds
Open your project, hit ⌘K, and launch Workshop. Type out what you want to build — tweak the details as you go. Everything stays editable.
Crypto Price
Copy
Make a CryptoPrice component that fetches live prices from the CoinGecko API. Users can select a popular coin (BTC, ETH, SOL, DOGE, ADA) or enter a custom ticker. Show the coin icon with a fallback if it fails. Include toggles for abbreviated prices, currency symbol, currency code, and icon visibility. Add controls for font, colors, padding, border (style, color, width per side), icon size, icon background, and spacing between icon and text. Layout should place icon and price side by side and size to fit content.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Glow Effect
Copy
Make a Component that displays large text with a multi-layered blurred shadow effect, where mouse position controls shadow direction. Includes optional gradient glow between two colors. Inspired by HTML/CSS/JS.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Text Scramble
Copy
Make a text scrambler effect where each character animates to reveal a word that I can customize.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Scroll Progress
Copy
Make a simple progress bar where I can customize colors and radius that progresses as I scroll my page.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Image Tilt
Copy
Make a 3D tilt card with editable image on hover. The card should tilt based on my cursor position. Include the shadow in the transform.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Before & After
Copy
Create an Image Comparison Slider component with two images, a draggable handle that stays centered vertically and updates image reveal as you drag, customizable handle size, radius, and padding (for easier grabbing), and optional left/right arrows with adjustable color, size, and offset.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Counter
Copy
Create a Number Counter component that animates from a start to an end value, with customizable duration, delay, decimals, easing, font, alignment, and color. It should only animate when in view, with an option to reset on re-entry. Support auto-start, looping, and content-based sizing.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Analog Clock
Copy
Make an analog clock that tells the time and works well on dark backgrounds. Make it minimal.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Mouse Trail
Copy
Create a Mouse Trail component that displays fading dots following the cursor. Include properties for dot color, size, spacing, trail length, fade duration, and background color. Dots should be spaced evenly based on movement distance and fade out over time.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
The built-in Workshop in Framer makes it easy to create advanced components—like visual effects, cookie banners, tabs, and more—without writing any code. It responds to a growing need among designers and developers who’ve been using AI tools to prototype components from scratch. Instead of starting with raw code, Workshop offers a faster, more focused way to build directly within Framer.
It’s designed to support rapid iteration, with advanced models that allow for quick updates, rollbacks, and a smooth, familiar interface. Generated components come with built-in property controls and automatically match your canvas styles, including fonts and colors, so they’re ready to use and easy to customize. Under the hood, the Workshop applies best practices for performance, memory efficiency, and offscreen rendering—so you can focus on design without worrying about technical debt.
Once a component is ready, it can be reused, shared, or even sold. And because the Workshop is built as a plugin, there’s a plan to open-source it soon—giving the Framer community the opportunity to extend and improve it together.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me?" he thought. It wasn't a dream. His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer. Gregor then turned to look out the window at the dull weather.
Reading Time
Copy
Create a Reading Time Calculator component that estimates reading time based on a given text input, assuming a default speed of 200 words per minute. Strip HTML tags from the text, and display the result with optional prefix/suffix. Allow customization of words-per-minute, font, and text color. The component should size automatically to fit its content.
AI output can vary each time, even with the same prompt. May require additional prompting to achieve similar results.
Generate layouts with our AI Wireframer
Desktop
·
1200
Breakpoint
Dani
Welcome to my personal portfolio! Here you can view my latest work and get to know my skills and experience.
Wireframer
Prompt your way to the perfect page structure and starter content so you can focus on the design.
