https://framer.com/m/Atelierquotepro-FSc3Hi.js

Io / Enhancements / AtelierQuotePro

AtelierQuotePro

AtelierQuotePro sets a portrait beside a quote with its byline and a row of figures, and moves between entries with a wipe rather than a slide.

Enhancements25 controlsportrait and quotewipe transition

Examples

Live specimens for every control the component exposes.

Default

items is the list of testimonials — each one carries a portrait, the quote, a name, a role and two figures. The entries on this page are sample text and should be replaced before the page goes out. mediaSide decides which side the portrait sits on, and device switches the whole block to the stacked mobile arrangement.

What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components
mountain ridge
01 / 02
What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components
mountain ridge
01 / 02
mountain ridge
01 / 02
What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components

Portrait

mediaRatio and mediaRadius shape the portrait and shadowDepth lifts it off the surface. The crop is per entry: switch Crop to Custom on a testimonial to reveal its X, Y and Zoom. On mobile the photo always stacks above the text, so mediaSide has no effect there.

portrait left

mountain ridge
01 / 02
What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components
mountain ridge
01 / 02
What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components
mountain ridge
01 / 02
What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components

square crop

What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components
mountain ridge
01 / 02
What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components
mountain ridge
01 / 02
mountain ridge
01 / 02
What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components

zoomed

What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components
mountain ridge
01 / 02
What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components
mountain ridge
01 / 02
mountain ridge
01 / 02
What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components

Transition and controls

wipeFrom sets which edge the next entry arrives from, or fades it instead. autoPlay steps through unattended and interval is how long each entry holds; pager decides how much of the counter, progress rule and arrows appears.

wipe from left

What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components
mountain ridge
01 / 02
What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components
mountain ridge
01 / 02
mountain ridge
01 / 02
What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components

fade

What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components
mountain ridge
01 / 02
What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components
mountain ridge
01 / 02
mountain ridge
01 / 02
What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components

no autoplay

What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components
mountain ridge
01 / 02
What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components
mountain ridge
01 / 02
mountain ridge
01 / 02
What clients say
The map fixes the structure before a single word is written, which is why the pages come out consistent. 
Sample entry
Replace with a real testimonial
64
pages
68
components

Props

The controls exposed on the instance panel. The panel titles several of them differently — items is Testimonials, mediaSide is Photo Side, background is Ground.

PropTypeBehaviour
itemsarrayPhoto, quote, name, role and two figures per entry, plus an optional per-entry crop.
items[] cropboolean, numberPer entry: Crop set to Custom reveals cropX, cropY and zoom. Defaults 50% / 42% / 1x.
schemaJSONstringAI Schema. Non-empty overrides the panel entries field by field; the crop stays from the panel.
labelTextstringThe eyebrow above the quote. Empty hides it and its rule.
deviceenumdesktop or mobile. Mobile stacks photo over text. Set it per Framer breakpoint.
mediaSideenumright or left. Which side the photo sits on. Desktop only.
mediaWidthnumberWidth of the photo column, 200 to 700. Desktop only.
columnGapnumberSpace between photo and text, 16 to 160.
mediaRationumberWidth over height of the photo, 0.5 to 1.6. 0.75 is a 3:4 portrait.
mediaRadiusnumberCorner radius of the photo, 0 to 60.
shadowDepthnumberShadow under the photo, 0 to 70. 0 removes it.
spacingnumberScales every vertical gap in the text column, 0.5 to 2.
wipeFromenumright, left, bottom or fade. Which edge the next entry arrives from; fade dissolves.
autoPlaybooleanSteps through the entries unattended. Always pauses on hover and while off-screen.
intervalnumberHow long each entry holds, 1500 to 14000 ms. Only with Autoplay on.
countUpbooleanRolls the two figures up as the entry arrives.
pagerenumoff, counter, track or full. Cumulative: index, then progress rule, then arrows.
fontJSONstringFontGenerator, Copy fontJSON from current TextStyles. Empty follows the theme family.
specenumui or editorial. Editorial needs an editorial section in the fontJSON, or it falls back to UI.
backgroundcolorThe surface. Off follows var(--button-bg-secondary).
inkcolorQuote and name. Off follows var(--text-color).
mutedcolorRole line, figure labels and the pager counter. Off follows var(--text-secondary).
hairlinecolorPhoto backing, figure rule, progress track and arrow border. Off follows var(--divide-color).
accentcolorEyebrow, figures, progress fill and arrow hover. Off follows var(--primary-color).
radiusnumberCorner radius of the whole block, 0 to 80.
paddingnumberPadding inside the block. Per side splits into paddingTop, Right, Bottom and Left.
PropTypeBehaviour
itemsarrayPhoto, quote, name, role and two figures per entry, plus an optional per-entry crop.
items[] cropboolean, numberPer entry: Crop set to Custom reveals cropX, cropY and zoom. Defaults 50% / 42% / 1x.
schemaJSONstringAI Schema. Non-empty overrides the panel entries field by field; the crop stays from the panel.
labelTextstringThe eyebrow above the quote. Empty hides it and its rule.
deviceenumdesktop or mobile. Mobile stacks photo over text. Set it per Framer breakpoint.
mediaSideenumright or left. Which side the photo sits on. Desktop only.
mediaWidthnumberWidth of the photo column, 200 to 700. Desktop only.
columnGapnumberSpace between photo and text, 16 to 160.
mediaRationumberWidth over height of the photo, 0.5 to 1.6. 0.75 is a 3:4 portrait.
mediaRadiusnumberCorner radius of the photo, 0 to 60.
shadowDepthnumberShadow under the photo, 0 to 70. 0 removes it.
spacingnumberScales every vertical gap in the text column, 0.5 to 2.
wipeFromenumright, left, bottom or fade. Which edge the next entry arrives from; fade dissolves.
autoPlaybooleanSteps through the entries unattended. Always pauses on hover and while off-screen.
intervalnumberHow long each entry holds, 1500 to 14000 ms. Only with Autoplay on.
countUpbooleanRolls the two figures up as the entry arrives.
pagerenumoff, counter, track or full. Cumulative: index, then progress rule, then arrows.
fontJSONstringFontGenerator, Copy fontJSON from current TextStyles. Empty follows the theme family.
specenumui or editorial. Editorial needs an editorial section in the fontJSON, or it falls back to UI.
backgroundcolorThe surface. Off follows var(--button-bg-secondary).
inkcolorQuote and name. Off follows var(--text-color).
mutedcolorRole line, figure labels and the pager counter. Off follows var(--text-secondary).
hairlinecolorPhoto backing, figure rule, progress track and arrow border. Off follows var(--divide-color).
accentcolorEyebrow, figures, progress fill and arrow hover. Off follows var(--primary-color).
radiusnumberCorner radius of the whole block, 0 to 80.
paddingnumberPadding inside the block. Per side splits into paddingTop, Right, Bottom and Left.

Usage

Guidance carried over from the component definition.

Reach for AtelierQuotePro

A testimonial needs a portrait, a byline and figures in one block.

The move between entries should be a wipe rather than a slide.

The figures should count up as the entry arrives.

The figures beside the quote carry as much weight as the words.

Reach for something else

You only need the quote itself — set it as text with a blockquote preset.

The entries live in the CMS as items.

Several testimonials should be visible at once — use a grid.

Io — Enhancements

Every specimen above is a live component instance. Colour, type and radius resolve from the project theme tokens.

io

An experiment in what a design system becomes when AI can consume it.

© 2026 io

Contact me

Create a free website with Framer, the website builder loved by startups, designers and agencies.