61:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 62:T773,

CMS Tag Stack lays a collection down the page as full-width rows — a thumbnail one side, title, caption and tags the other — and narrows it with tag chips: a chip press swaps a class, hidden rows leave and the rest close up.

Every row is one CSS grid: a thumbnail column at the width you set, holding a square, 4:3 or 16:9 box, and a text column taking the rest; one switch moves it to the right.

Pick several tags at once and choose whether a row carries any of them or every one; each chip carries its count, a polite line reads the total, and a slot per row binds a collection.

- **One column of rows.** A row per entry, thumbnail and text side by side.

- **Three shapes.** Square, 4:3 or 16:9 sets every built-in thumbnail.

- **Either side.** The thumbnail column sits left or right, at your width.

- **Chips that stack.** Several tags stay on at once, matching any or every tag.

- **One class swap.** A chip press swaps classes; the rest is CSS.

- **Counts on the chips.** Each chip carries its count; a line reads the total.

- **CMS slots.** One slot per row binds a collection; a slotted row keeps its own height.

- **Rules and stripes.** Dividers and banding follow the rows showing.

What you control

• Items as an array: title, caption, tags as a comma list, image with alt text, link and a thumbnail tint

• Row slots for the CMS path, paired one to one with the items

• Thumbnail side, width and ratio, row gap and padding, dividers, stripes, radius, match mode, initial tags, All chip

• Font, five colours, text size, max width, alignment, count wording, placeholder lines and labels

Limits: one stack per section, one thumbnail ratio for built-in rows (a slotted row keeps its own height), images from your project or CMS, and about eighty rows.

63:T78d,

CMS Tag Rail lays a collection along one horizontal track of fixed-ratio cards and narrows it with tag chips: a chip press swaps a class, hidden cards leave the track and the rest close up.

Scrolling is the browser's own — a drag, a sideways wheel, or arrow keys on the focused track — and every card snaps to the left edge; side arrows nudge it and a dot per group jumps there.

Pick several tags at once and choose whether a card carries any of them or every one; each chip carries its count, a polite line reads the total showing, and a slot per card binds a CMS collection.

- **One snapping track.** Cards ride one row and snap to the left edge.

- **Three ratios.** Square, 4:5 or 16:9 sets every built-in card face.

- **Chips that stack.** Several tags stay on at once, matching any or every tag.

- **One class swap.** A chip press swaps classes; the rest is CSS.

- **Counts on the chips.** Each chip carries its count; a line reads the total.

- **CMS slots.** One slot per card binds a collection; a slotted card keeps its height.

- **Arrows, dots and keys.** Arrows nudge the track, dots jump to a group, keys move it.

- **Styled by you.** Cards per view, peek, gap, radius, font, colours, size and labels.

What you control

• Items as an array: title, caption, tags as a comma list, image with alt text, link and a tint for the empty face

• Card slots for the CMS path, paired one to one with the items

• Cards per view, peek, ratio, gap, radius, match mode, initial tags, the All chip, arrows and dots

• Font, five colours, text size, max width, alignment, the count wording, the placeholder lines and labels

Limits: one rail per section, one ratio for the built-in card faces (a slotted card keeps its own height), images from your project or CMS, and about eighty cards.

64:T763,

CMS Tag Grid lays a collection into an even grid of fixed-ratio cards and narrows it with tag chips: a chip press swaps a class and CSS does the rest, nothing measured and no observer.

Pick several tags at once and choose whether a card carries any of them or every one; each chip shows the count behind it and a polite line reads out the total on screen.

Bind a CMS collection through the card slots, or use the built-in card face at 1:1, 4:5 or 16:9; columns follow the frame, and the Framer canvas shows the finished grid on its first frame.

- **One even grid.** Every card face shares a ratio, so rows line up.

- **Three ratios.** Square, 4:5 or 16:9, set once.

- **Chips that stack.** Several tags stay on at once, matching any tag or every tag.

- **One class swap.** A chip press swaps classes; the rest is CSS.

- **Counts on the chips.** Each chip carries its count; a polite line reads the total.

- **CMS slots.** One component slot per card binds a collection straight into the grid.

- **Columns that follow the frame.** Auto, or two to four across; a phone holds two.

- **Styled by you.** Gap, radius, five colours, text size, alignment, max width and every label.

What you control

• Items as an array: title, caption, tags as a comma list, image with alt text, link and a tint for the empty face

• Card slots for the CMS path, paired one to one with the items

• Card ratio, column count, gap, radius, match mode, initial tags, the All chip and its label, and alignment

• Five colours, text size, max width, the count wording, the placeholder lines and the accessibility labels

Limits: one grid per section, one ratio for every card face (a slotted card keeps its own height), images from your project or CMS, up to about eighty cards.

65:T7e1,

Glass Pricing Tabs puts your plans behind a billing switch: press Monthly or Yearly and every figure counts up to its new number, with a save badge on the term that earns it.

Each plan sits on a frosted card with a blurred backdrop, a hairline edge and a highlight sheen, and the plan you feature keeps an accent border and a label you write.

The tabs answer the arrow keys and read as a real tab list, the section lands complete on the Framer canvas at the first frame, and reduced motion gets the new figures at once.

Key features

- **Two or three billing tabs.** Label each term, add a suffix like /mo, and a save badge where it belongs.

- **Prices that count up.** A tab press rolls every figure to its new number in pure CSS.

- **Frosted plan cards.** A blurred backdrop, a hairline edge and a highlight sheen, blur set in pixels.

- **One plan out front.** Mark a plan featured for an accent border and a label you write.

- **Everything on the card.** Name, description, a price per tab, up to six features and a button with its own link.

- **Keyboard tabs.** Arrow keys, Home and End move between terms, announced as a real tab list.

- **Columns you set.** Auto, two, three or four across, and a single column on a phone.

- **Styled by you.** Five colours, radius, gap, text size, max width, alignment and every label.

What you control

• Tabs as an array: label, price suffix and a save badge for the longer term

• Plans as an array: name, description, a price per tab, features one per line, button label, link and a featured flag

• Columns, card gap, radius, max width, alignment, text size and glass blur

• Five colours, count-up length, the save badge, the featured label and the accessibility labels

One pricing section per page, up to four plans and three billing tabs, with a backdrop glow you can switch off when the section sits on your own gradient.

66:T721,

CMS Tag Masonry lays a collection into real CSS columns and narrows it with tag chips: pick several tags, choose any or every, and the wall settles at once with every surviving card where it was.

Cards are links straight to the work, the filter is pure CSS and the count line reads out loud, so nothing is measured, nothing re-flows, and the canvas shows the finished grid.

Bind a CMS collection through the card slots, set three column counts and a gap, and pick the tags that are on when the page opens.

Key features

- Real columns. column-count packs the cards, so your order is the reading order at every width.

- Chips that stack. Several tags at once, with one switch for any-of or all-of.

- One repaint. A chip swaps a class; hidden cards fold away and the rest stay put.

- CMS slots. One component slot per card binds a collection straight into the grid.

- Cards that link. Title, caption, tag line and a link on the whole card.

- A count that speaks. Showing 7 of 10, announced politely as chips change.

- Open on a tag. Start with any tags already on, for a curated first view.

- Styled by you. Three column counts, gap, radius, chip radius, five colours, text size, max width.

What you control

• Items as an array: title, caption, comma tags, image, alt text, link, height ratio and a tint

• Item slots for the CMS path, paired one to one with the items

• Columns for desktop, tablet and phone; gap; radius; chip radius; any-or-every switch; initial tags

• All label, count template, empty and no-match text, five colours, text size, max width, chip align

One grid per section, images from your own project or CMS, and a card count comfortable up to about forty.

67:T761,

CMS Splay Carousel opens a collection like a hand of cards: every card turns around one pivot below the track, so the middle card stands upright and on top while the cards beside it lean out and settle lower.

Drag it and the whole fan turns with your finger, or use the wheel, the arrow keys and the dots — one centre index is the whole state, so the deck lands square on a card.

Bind a CMS collection through the card slots, set the spread in degrees and the pivot in pixels, and the canvas shows the finished first frame.

Key features

- A pivot you place. Spread in degrees per card, pivot distance in pixels — the fan opens that far.

- The middle card leads. The centre card stands upright and on top; each step out leans further and fades.

- Flat and fast. Cards turn in the page plane, so the fan stays crisp at any card size.

- CMS slots. One component slot per card binds a collection straight into the fan.

- Five ways to move. Drag, horizontal wheel, arrow keys, dots and arrow buttons.

- Autoplay in seconds. Set the interval; it rests while a visitor hovers or tabs in.

- Endless loop. Cards wrap around the fan in both directions.

- Styled by you. Card size, spacing, radius, five colours, text size, alignment and every label.

What you control

• Cards as an array: title, caption, image, alt text, link and a tint for the gradient face

• Card slots for the CMS path, paired one to one with the cards

• Spread in degrees, pivot distance, lift, card width, card ratio, spacing, cards visible each side, radius

• Autoplay seconds, loop, edge fade, arrows, dots, five colours, text size, max width, align, labels

One fan per section, images from your own project or CMS, and a card count comfortable up to about twenty-four.

68:T742,

CMS Ribbon Carousel bends a collection into a ribbon: cards curve away in 3D, the middle one stays sharp and upright, and the cards beside it tilt, sink and soften.

Drag it, flick the wheel, press the arrow keys or tap a dot — one centre index is the whole state, so the ribbon always lands on a card.

Bind a CMS collection through the card slots, set curve, depth and spacing in degrees and pixels, and the canvas shows the finished first frame.

Key features

- Ribbon curvature. Tilt, depth and scale grow with each step from the centre, in degrees you set.

- The middle card leads. Side cards soften and fade, so one card reads first at any width.

- CMS slots. One component slot per card binds a collection straight into the ribbon.

- Four ways to move. Pointer drag with snap, horizontal wheel, arrow keys, dots and arrow buttons.

- Autoplay in seconds. Set the interval; it rests while a visitor hovers or tabs into the track.

- Endless loop. Cards wrap around the ribbon, so the track keeps going in both directions.

- Reduced motion honoured. Ask for less movement and the same cards arrive in place instantly.

- Styled by you. Card size, gap, radius, five colours, text size, alignment and every label.

What you control

• Cards as an array: title, caption, image, alt text, link and a tint for the gradient face

• Card slots for the CMS path, paired one to one with the cards

• Curve in degrees, depth, perspective, card width, gap, cards visible each side, radius

• Autoplay seconds, loop, edge softening, arrows, dots, five colours, text size, max width, align, labels

One ribbon per section, images from your own project or CMS, and a card count that stays comfortable up to about twenty-four.

69:T77f,

Aisol Size Guide lays out one garment's size chart — sizes down the rows, measurements across the columns — from your own content or a CMS collection, with one switch that turns the whole chart from centimetres to inches.

It is a real table with a caption and row and column headers; on phones the same table becomes one card per size, in CSS, so screen readers get the same structure everywhere.

Nothing is observed, measured or animated: the unit switch is two buttons with a pressed state inside the component, no storage and no hash, and the Framer canvas shows the finished chart on the first paint.

- Sizes as rows: label, a note like "The size most people take", and a highlight for the one you want seen first.

- Measurements as columns: name plus a per-column switch so ages or ratings never get converted.

- Values you write: single numbers and ranges convert to inches with one decimal; anything else stays exactly as written.

- Optional "How to measure" notes as a numbered list; empty state text instead of a blank frame. Colours given as rgb() reach the page unchanged.

What you control

• Sizes as an array: label, note, highlight — or bind a CMS collection through the size slots

• Measurements as an array: name, converts on/off, up to six columns

• Unit switch on/off and the starting unit, stack breakpoint, heading and caption text, the words behind the switch, empty-cell and empty-state text, measuring notes

• Accent, text, muted, line, header, highlight and card colours; card on/off; text size; max width (0 = fill); radius; gap; left or centred

Limits: one garment per chart by design; six measurement columns is the cap so the table stays readable. Conversion covers centimetres to inches only. Size slots pair by index with the sizes array.

6a:T806,

Aisol Spec Sheet lays out the specifications of one product or service as labelled rows under group headings — dimensions, materials, what is included — from your own content or a CMS collection.

It is a real definition list, not a table: each group is a heading at the level you choose, each row a term and its value, so a screen reader reads it as what it is.

Nothing is observed, measured or animated: the group jump links scroll only the component's own headings, no hash is written, and the Framer canvas shows the finished sheet on the first paint.

- Groups with an optional note, and rows that match a group by name — write the rows once, reorder the groups freely.

- Per row: label, value as a string you write, an optional note under the value, and a highlight flag for the rows that matter.

- Values that are exactly yes or no become check and cross icons with the words behind them; anything else stays as text.

- Two layouts: a two-column sheet that stacks label over value on phones, or grouped cards in two columns that fall to one under a width you set.

- Empty state text instead of a blank frame. Colours given as rgb() reach the page unchanged.

What you control

• Groups as an array: name and note — or bind a CMS collection through the row slots

• Rows as an array: group, label, value, note, highlight — rows whose group matches nothing land in one final group you name

• Sheet or columns layout, stack breakpoint, label column width, group jump nav on/off, heading level, region label, empty-cell and empty-state text

• Accent, text, muted, line, label fill, highlight fill and card colours; card on/off; text size; max width (0 = fill); radius; gap; left or centred

Limits: one product per sheet by design — for two to four products side by side, use Aisol Compare Table. Values are strings; there is no unit conversion. Row slots pair by index with the flat rows array, not with a group.

6b:T773,

Aisol Menu Board lays out a cafe, kitchen or course menu by category — each item with a name, description, price, badge and dietary tags — from your own content or a CMS collection.

Prices sit right-aligned behind a dotted CSS leader in list layout, or on two columns of cards that fall to one under a width you set. Either way it is a real list under real headings, and every price carries a hidden "Price" label for screen readers.

Nothing is observed, measured or animated: the category jump links scroll only the component's own headings, no hash is written, and the Framer canvas shows the finished menu on the first paint.

- Categories with an optional note, and items that match a category by name — write the items once, reorder the categories freely.

- Per item: name, description, price as a string you write, a badge like "New", dietary tags as one comma-separated string that becomes chips, and an optional image.

- List or cards layout, optional jump nav, currency prefix and suffix, empty state text. Colours given as rgb() reach the page unchanged.

What you control

• Categories as an array: name and note — or bind a CMS collection through the item slots

• Items as an array: category, name, description, price, badge, tags, image, alt — unmatched items land in one final group you name

• Layout, stack breakpoint, dotted leader, images, jump nav, heading level, region label, the hidden "Price" label, currency prefix and suffix, empty-state text

• Accent, text, muted, line, badge, tag and card colours; card on/off; text size; max width (0 = fill); radius; gap; left or centred

Limits: prices are strings — no currency maths, sorting or cart. Items match categories by name; item slots pair by index with the flat items array.

6c:T7d3,

Aisol Compare Table sets two to four plans side by side — features down the rows, plans across the columns — from your own content or a CMS collection.

It is a real HTML table with a caption, column and row headers, and check or cross cells that carry the words "Included" and "Not included" for screen readers.

The sticky header, the highlighted column and the stack-to-cards breakpoint are CSS inside the component's own wrapper; nothing outside it is read, measured or animated, and the Framer canvas shows the finished table.

- Two to four columns: name, price, note, a CTA label and link, and one column you can mark as the plan you want chosen.

- Rows take any value — "yes", "no", or free text like "8 students" — and yes/no become icons with the words behind them, never a bare symbol or a colour alone.

- Sticky header on or off, stack to one card per column under a breakpoint you set, empty state text instead of a blank frame. Colours given as rgb() reach the page unchanged.

What you control

• Columns as an array: name, price, note, CTA label, link, highlight — or bind a CMS collection through the column slots

• Rows as an array: a feature label plus one value per column; "yes"/"no" render as icons, anything else stays as text

• Sticky header on/off, stack breakpoint, heading level, caption text (visible or screen-reader only), empty-state text, and the words behind the yes/no icons

• Accent, text, muted, line, header, highlight and yes/no colours; card on/off; text size; max width (0 = fill); radius; cell padding; left or centred

Limits: four columns is the cap — past that the table stops being readable on a phone, so extra columns are ignored. Column slots pair by index with the columns array. There is no billing toggle and no pricing maths; prices are strings you write.

6d:T5c2,

Aisol Process Steps lays out "how it works" steps from a CMS collection — numbered, connected, and readable before any script runs.

Steps reveal as they enter the viewport using an observer on the component's own items only; the Framer canvas shows every step already finished.

Reduced motion gets the finished list with no observer at all; keyboard and screen-reader users get a real ordered list with real links.

- Vertical or horizontal direction; the horizontal rail stacks under a breakpoint you set, and the connector hides itself when it would misalign.

- Numbers, dots or no markers; a connector line between markers; per-step eyebrow, image, description and a link on the title only.

- Empty state text instead of a blank frame. Colours given as rgb() reach the page unchanged.

What you control

• Steps as an array: eyebrow, title, description, image or image URL, alt text, link — or bind a CMS collection through the step slots

• Direction, stack breakpoint, numbering style, connector on/off

• Reveal on/off, stagger and duration; heading level for step titles; region label for screen readers; empty-state text

• Accent, text, muted, line and card colours; card on/off; text size; max width (0 = fill); radius; gap; left or centred

Limits: the reveal runs once per step by design. Step slots pair by index with the steps array.

6e:T624,

Aisol Dossier is a folder that opens on hover, focus or click and fans out up to five cards — title, note, image and a link on each. Cards without an image get a drawn poster, never a blank. It is free, and it is the entry point to the Aisol motion series (Aisol Reel Rail, Aisol Quote Motion).

One open state drives everything. The fan is CSS on that state, so nothing is measured, no observer is attached, and the canvas shows the folder already open.

- Opens on hover or focus, or on click only; Escape closes it either way. The open button carries aria-expanded and controls the card region.

- Card links are reachable only while the folder is open, so keyboard users never land on hidden cards.

- Under prefers-reduced-motion the folder still opens — it just skips the transition.

What you control

• Cards as an array: title, note, image or image URL, alt text, link — or bind a CMS collection through the card slots (up to five)

• Tab label, sticker, pocket title and pocket meta text; opens on hover/focus or click only; start open

• Spread (degrees) and lift (percent) of the fan; radius; max width (0 = fill the frame)

• Open and close labels for screen readers; empty-state text; text size

• Folder, tab, paper, accent, text and muted colours

• Card slots: give the slotted frame a height of 100% so it fills the card

Limits: five cards by design (the fan stays readable). Paid series: Aisol Reel Rail ($12) and Aisol Quote Motion ($10).

6f:T6f7,

Aisol Stat Counters counts up your numbers from a CMS collection, and stops being clever when it should.

Screen readers hear the final figure once, not every frame; the digits themselves are hidden from them.

Reduced motion gets the finished numbers with no animation and no observer, and so does the Framer canvas.

- Values stay text. `1,240`, `98.5`, `$12` and `24/7` all work. Anything that reads as a number counts up; anything else is shown exactly as typed.

- Mistakes are visible where they should be. If a value cannot be read as a number, the Framer canvas shows a short note naming the value and the accepted formats. The published page never shows that note — it just prints your text.

- Counting starts when the row is seen, using an observer on the component's own items, which disconnects after the first pass. No scroll listeners, no measuring.

- Prefix, suffix, label and a small note per number. Links go on the label rather than the digits, so a screen reader announces the number and the link separately.

- Columns step four, two, one; dividers disappear once the row becomes a column. Breakpoints live in CSS inside the component, so the canvas matches the page.

- Locale-aware thousands separators and decimal places taken from how you typed the value.

What you control

• Numbers as an array: value, prefix, suffix, label, note, link — or bind a CMS collection through the number cards slots

• Count up on or off, duration, when it starts, locale for digit grouping

• Columns 1–4 with two step-down breakpoints, alignment, dividers, notes on or off

• Digit size, text size, gap, padding; accent, text, muted and divider colours; empty-state text

70:T5b7,

Aisol Quote Motion is one testimonial carousel with three motions: slide, stamp — cards land on a small stack — and fade. Switching is a control, not a different component.

One index drives everything. The motion is CSS on that index, so nothing is measured, no observer is attached, and the canvas shows the first quote at rest.

- Autoplay pauses while the visitor hovers or focuses the carousel, and turns off under prefers-reduced-motion — the arrows and dots still work.

- Screen readers get one quote at a time; the position ("Quote 2 of 4") is announced politely, never the whole stack.

- Stars, a source badge, an avatar (or initials when there is no photo) and a link per quote.

What you control

• Quotes as an array: quote, author, role, avatar image or URL, rating, source, link — or bind a CMS collection through the quote slots

• Motion: slide, stamp or fade; autoplay seconds (0 turns it off)

• Arrows, dots, stars and avatars on or off; left or centred

• Max width, radius, padding, text size; region label and position wording for screen readers; empty-state text

• Accent, text, muted and card colours

• Quote slots: give the slotted frame a height of 100% so it fills the card (all cards share the tallest card's height)

Limits: one quote is visible at a time by design (use Aisol Review Wall for a grid).

71:T5bf,

Aisol Reel Rail is a horizontal rail of video cards where only the card in focus plays. Every other card holds its poster, so a page with ten clips downloads and decodes one at a time.

Focus comes from each card's own intersection ratio inside the rail. There are no scroll listeners and no measuring anywhere in the component — the browser keeps doing the scrolling and snapping, and the canvas stays still.

- Reduced motion is respected properly: autoplay turns off and every card gets a play button instead, so the clips are still reachable.

- The canvas shows posters only — no video element is created until the page is live.

- Playback is driven directly (play/pause on the element), so switching cards actually switches the clip.

What you control

• Reels as an array: title, subtitle, badge, video file or URL, poster image or URL, alt text, link — or bind a CMS collection through the reel slots

• Shape: portrait 9:16, landscape 16:9 or square

• Plays: the card in focus, on hover, or button only; loop on or off

• Turn and shrink for the cards leaving the centre, card width, gap, radius, arrows

• Card heading level, rail name and play/pause labels for screen readers, empty-state text

• Text size; accent, text, muted and card colours

Limits: one clip plays at a time by design. Clips are muted (browsers require it for autoplay).

72:T798,

Aisol Services Wall is a services section that runs on your CMS collection, not on a copy of your content.

Every item is reachable by keyboard and announced properly by a screen reader — nothing is hidden behind hover.

Motion respects prefers-reduced-motion, and the Framer canvas renders exactly what the published page renders.

- Three layouts in one component. Split (media and text alternating sides), cards, or compact rows. Switching is a control, not a different component.

- Reveal without measuring. Items appear as they enter the viewport using an observer on this component's own items — no scroll listeners, no element measuring, nothing read from the page around it.

- Reduced motion means no observer at all. Visitors who ask for less motion get the plain section immediately, with none of the machinery running.

- No image? Still finished. An item falls back to an emoji icon, then to a numbered badge — no empty grey panels while you wait for artwork.

- Bullets, a small label, a link per item, and a heading level you choose. Media ratio is CSS aspect-ratio, so nothing jumps as images load.

- Columns step down on their own: three, two, one. The breakpoints live in CSS inside the component, so the canvas matches the live page.

What you control

• Layout: split (media and text alternating), cards, or compact rows; columns 1–4 with two step-down breakpoints

• Media ratio, reveal on scroll or off, title level, label and bullets on or off

• Per service: title, blurb, label, icon, image and alt text, bullets, link and link text

• Service cards slots — bind a CMS collection, slot 1 replaces service 1

• Gap, radius, text size, padding; accent, text, muted, media fill and border colours; empty-state text

More components at Aisol Studio → https://thistle-timing-694660.framer.app/

73:T82a,

Aisol Flow Map draws a small diagram: labelled nodes in a grid, and connecting lines between them. Use it for a course path, an admissions flow, a process with a branch in the middle.

Nodes are placed by grid cell — column and row, not pixels — and the connectors are drawn in the same grid coordinates. That is the whole trick: nothing is measured, so the diagram cannot drift when a font loads or a container resizes, and the Framer canvas stays still.

Flow reads left to right, top to bottom; each step leads to the next. There are no arrowheads by design — a stretched SVG marker distorts — so direction is carried by the order and by wording you control.

- Reduced motion is respected properly: when the visitor has motion turned off, the animation does not run and the observer is never attached.

- Nothing is measured. No getBoundingClientRect, no scroll listeners, no layout reads — so the Framer canvas stays still while you work.

- The static renderer is a separate, pure branch: no observers, no timers, no transitions. What you see on the canvas is the finished state.

What you control

• Nodes: key, label, note, grid column and row, tone (default / accent / optional), link

• Connections: from, to, dashed or solid, and which way the elbow turns

• Grid size, gap, radius, line width, line colour

• Draw-in animation with duration and stagger, or off

• Heading level, text size, five colours

• Bind a CMS collection through the node slots

• Map name for screen readers, the leads-to wording used on phones, and the empty-state text

On phones the lines are dropped and each node says where it leads in words — the connections survive the layout change instead of disappearing with the drawing. A connection pointing at a key that does not exist is skipped rather than drawn wrong, and screen readers get the relationships as a sentence.

More components at Aisol Studio → https://thistle-timing-694660.framer.app/

74:T5ad,

Aisol Catalogue Nav is a navigation bar for shops and catalogues: top-level menus that open a wide panel with link columns and featured cards, and a mobile drawer that drills down one level at a time.

It stays inside its own root. Focus is tracked within the component rather than read from the document, the open panel is reached by ref instead of a global id lookup, and the drawer traps Tab by cycling its own focusable elements — so nothing outside the component is read or written.

Keyboard: ArrowDown on a menu opens its panel and moves focus to the first link; Escape closes and returns focus to the trigger. The mobile drawer keeps Tab inside itself and starts on the close button. Reduced motion is respected; the static renderer draws the closed bar with no observers or timers.

What you control: menus, link columns, featured cards, and a promo slot · open on hover or on click, with a hover delay · brand logo or text, and the link the brand points to · drawer labels (menu name, back), breakpoint, colours and radius.

Sits beside SaaS Nav Kit, not on top of it: that one is a product-site navbar with a mega menu and drawer; this one is built for catalogue depth — many columns, featured cards, and a drill-down drawer.

Part of the Aisol component library — 19+ production-ready components. Full paid set: framer.com/@ulz-song · store: payhip.com/AisolStudio

75:T6bc,

Aisol Depth Cards is a horizontal rail where each card turns away as it leaves the centre — a little rotation, a little scale, a little fade — so the row reads as depth instead of a flat strip.

The depth comes from each card's own intersection ratio, not from geometry. There is no scrollLeft read and no rect measurement anywhere in the component; the browser keeps doing the scrolling and snapping it is already good at.

Reduced motion is respected properly: when the visitor has motion turned off, the animation does not run and the observer is never attached. Nothing is measured — no getBoundingClientRect, no scroll listeners, no layout reads — so the Framer canvas stays still while you work. The static renderer is a separate, pure branch: no observers, no timers, no transitions. What you see on the canvas is the finished state.

What you control: turn angle, shrink and fade (set any to zero for a flatter rail) · card width, gap, corner radius · arrows on or off (they scroll the rail, they do not rebuild it) · heading level for card titles, text size, four colours · cards as a plain array, or bind a CMS collection through the card slots · rail name for screen readers, and the empty-state text.

Cards without an image draw a soft tinted block from the title rather than an empty grey box, so a half-filled collection still looks finished. Card width steps down at tablet width and becomes screen-relative on phones — the page itself never scrolls sideways, only the rail does.

Part of the Aisol component library — 19+ production-ready components. Full paid set: framer.com/@ulz-song · store: payhip.com/AisolStudio

60:["$","$L61",null,{"value":{"fallback":{"$inf$activity-creator-82d016d2-8113-4080-8f2a-7c3796dceab4-all:/unified/creator/82d016d2-8113-4080-8f2a-7c3796dceab4/activity/":[{"data":[{"id":"01a081b4-890b-7203-a807-8e5dd774e7ff","type":"component.created","target":{"type":"component","id":"alNpAtH5aBTVmidkALBr","preview":"CMS Tag Stack","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a081b4-299e-75d0-949d-74b112bddd97.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-08T15:48:07.563Z","latestAt":"2026-09-08T15:48:07.563Z"},{"id":"01a07d1c-e3c2-76fc-936a-43d886304513","type":"component.created","target":{"type":"component","id":"JIypKRGsGxohE8oNHpmZ","preview":"CMS Tag Rail","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a07d1c-4357-716e-ac04-f071a94e223d.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-07T18:24:00.450Z","latestAt":"2026-09-07T18:24:00.450Z"},{"id":"01a07c07-1ad1-74ad-bce5-b91d3f1b0741","type":"component.created","target":{"type":"component","id":"tH7FbqGtFvaovZ18F8T8","preview":"CMS Tag Grid","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a07c05-e174-7498-874d-cdb605b0f87a.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-07T13:20:35.537Z","latestAt":"2026-09-07T13:20:35.537Z"},{"id":"01a07ab7-53ff-766a-8c80-3d26c44d1a59","type":"component.created","target":{"type":"component","id":"seEMzqt8rWj0GparHd33","preview":"Glass Pricing Tabs","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a07ab6-d05a-72ea-b23f-8470de6f76e3.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-07T07:13:50.079Z","latestAt":"2026-09-07T07:13:50.079Z"},{"id":"01a079d5-3cd5-73fd-98a1-8841dd7f485d","type":"component.created","target":{"type":"component","id":"paW44AR270HualSVZVK0","preview":"CMS Tag Masonry","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a079d4-ca27-7322-9132-d3c8f3441fba.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-07T03:06:53.013Z","latestAt":"2026-09-07T03:06:53.013Z"},{"id":"01a0795d-a9d2-7539-87a8-e8f568d6808d","type":"component.created","target":{"type":"component","id":"14SAFf3E9lzu549dsh3L","preview":"CMS Splay Carousel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0795d-4609-741f-ac0d-4459b410b23d.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-07T00:56:16.594Z","latestAt":"2026-09-07T00:56:16.594Z"},{"id":"01a07828-5ae4-743d-925e-22008b081813","type":"component.created","target":{"type":"component","id":"mz5T5WIQHJR5wh6fdMQx","preview":"CMS Ribbon Carousel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a07827-c6ec-77c9-82a4-5bf74232d595.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-06T19:18:25.764Z","latestAt":"2026-09-06T19:18:25.764Z"},{"id":"01a0773f-c28b-71cc-b7ef-b1ac059988ed","type":"component.created","target":{"type":"component","id":"Rqst1m2zffJoNk7rujmK","preview":"Aisol Size Guide","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0773f-3ced-74c7-b13e-4f8e2dcd2247.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-06T15:04:22.411Z","latestAt":"2026-09-06T15:04:22.411Z"},{"id":"01a07691-816f-7398-afaa-404c078a7591","type":"component.created","target":{"type":"component","id":"TxEisRaeS1U5svh8Vro7","preview":"Aisol Spec Sheet","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a07691-1002-76b0-ba6d-143d6e9a20ec.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-06T11:54:02.479Z","latestAt":"2026-09-06T11:54:02.479Z"},{"id":"01a07627-50b2-731c-b5d0-355da3afb2b2","type":"component.created","target":{"type":"component","id":"8Zu0R6saewfPeKEItMSC","preview":"Aisol Menu Board","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a07626-3f8f-779d-b177-b36718647dcd.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-06T09:58:03.186Z","latestAt":"2026-09-06T09:58:03.186Z"},{"id":"01a074dd-d3c6-769e-a55d-c6c77490c6df","type":"component.created","target":{"type":"component","id":"mRXu8JwHyai7VqD9WuiG","preview":"Aisol Compare Table","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a074dd-6b26-76ea-a192-61a80608886e.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-06T03:58:09.862Z","latestAt":"2026-09-06T03:58:09.862Z"},{"id":"01a073e3-e6d5-7176-be5e-9c0da8b9975f","type":"component.created","target":{"type":"component","id":"OKTUY7fI0pQIPZYEzSRH","preview":"Aisol Process Steps","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a073e3-780a-72b8-b0a4-3b2593cacd5c.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-05T23:25:10.741Z","latestAt":"2026-09-05T23:25:10.741Z"},{"id":"01a06f00-8bed-70ee-9a52-c05fbae5fd76","type":"component.created","target":{"type":"component","id":"09Q1XTGsRliuIg10SCFv","preview":"Aisol Dossier","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a06f00-57aa-7495-a61e-c4a1a2617775.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-05T00:38:21.933Z","latestAt":"2026-09-05T00:38:21.933Z"},{"id":"01a06cf2-6d94-75d4-856d-aa67d8c370ee","type":"component.created","target":{"type":"component","id":"ydsnG10MRzFtJUDJD2Dg","preview":"Aisol Stat Counters","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a06cf2-40b5-712b-93af-6dd4d607d9c1.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-04T15:03:42.228Z","latestAt":"2026-09-04T15:03:42.228Z"},{"id":"01a06cf0-aef0-76bf-8aa2-83b200915b3e","type":"component.created","target":{"type":"component","id":"VRwPETdjyxPLg5KVDOKK","preview":"Aisol Quote Motion","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a06cf0-6319-747e-a676-dc0f29550732.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-04T15:01:47.887Z","latestAt":"2026-09-04T15:01:47.887Z"},{"id":"01a06cee-a4ba-747c-b6c4-520ef559cd43","type":"component.created","target":{"type":"component","id":"jJmmOFVxPOBI9eyo2vJX","preview":"Aisol Reel Rail","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a06cee-5ae1-74d5-b345-a08bb1e7f4cb.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-04T14:59:34.202Z","latestAt":"2026-09-04T14:59:34.202Z"},{"id":"01a067e3-7d37-720a-bd0f-45e7931a52c5","type":"component.created","target":{"type":"component","id":"tAOE4bA24NrUtgHxtvx4","preview":"Aisol Services Wall","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a067e3-2679-7249-a8cb-3c6d5e8442d4.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-03T15:29:17.111Z","latestAt":"2026-09-03T15:29:17.111Z"},{"id":"01a067df-f2b6-7568-bedf-181b165ce2ca","type":"component.created","target":{"type":"component","id":"KGj9KiJliaBaiIYnGTZt","preview":"Aisol Flow Map","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a067df-910e-702d-bee9-048eb8d6119a.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-03T15:25:25.046Z","latestAt":"2026-09-03T15:25:25.046Z"},{"id":"01a063fd-4bca-73b0-8d68-778f9d2edd71","type":"component.created","target":{"type":"component","id":"PiG9rgr3aM994hwxXp4P","preview":"Aisol Catalogue Nav","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a063fd-094f-77e8-a487-38e29d17a49a.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-02T21:18:59.530Z","latestAt":"2026-09-02T21:18:59.530Z"},{"id":"01a063f9-3fa6-726d-8502-cb9c4dfb1f62","type":"component.created","target":{"type":"component","id":"WRZqPJpyB3jRSVw25oEy","preview":"Aisol Depth Cards","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a063f9-03c6-76e7-a0b1-1347169c017c.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","slug":"ulz-song","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-02T21:14:34.278Z","latestAt":"2026-09-02T21:14:34.278Z"}],"pagination":{"next":"MjAyNi0wOS0wMlQyMToxNDozNC4yNzhafDAxYTA2M2Y5LTNmYTYtNzI2ZC04NTAyLWNiOWM0ZGZiMWY2Mg","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:82d016d2-8113-4080-8f2a-7c3796dceab4:/unified/posts/?creator=82d016d2-8113-4080-8f2a-7c3796dceab4&with=reposts":[{"data":[{"id":"01a081b4-86d1-75d9-a742-181dfc7e2699","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"alNpAtH5aBTVmidkALBr","resolved":true,"title":"CMS Tag Stack","body":"$62","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CMS Tag Stack lays a collection down the page as full-width rows — a thumbnail one side, title, caption and tags the other — and narrows it with tag chips: a chip press swaps a class, hidden rows leave and the rest close up."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Every row is one CSS grid: a thumbnail column at the width you set, holding a square, 4:3 or 16:9 box, and a text column taking the rest; one switch moves it to the right."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Pick several tags at once and choose whether a row carries any of them or every one; each chip carries its count, a polite line reads the total, and a slot per row binds a collection."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"- **One column of rows.** A row per entry, thumbnail and text side by side."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Three shapes.** Square, 4:3 or 16:9 sets every built-in thumbnail."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Either side.** The thumbnail column sits left or right, at your width."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Chips that stack.** Several tags stay on at once, matching any or every tag."}]},{"type":"paragraph","content":[{"type":"text","text":"- **One class swap.** A chip press swaps classes; the rest is CSS."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Counts on the chips.** Each chip carries its count; a line reads the total."}]},{"type":"paragraph","content":[{"type":"text","text":"- **CMS slots.** One slot per row binds a collection; a slotted row keeps its own height."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Rules and stripes.** Dividers and banding follow the rows showing."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Items as an array: title, caption, tags as a comma list, image with alt text, link and a thumbnail tint"}]},{"type":"paragraph","content":[{"type":"text","text":"• Row slots for the CMS path, paired one to one with the items"}]},{"type":"paragraph","content":[{"type":"text","text":"• Thumbnail side, width and ratio, row gap and padding, dividers, stripes, radius, match mode, initial tags, All chip"}]},{"type":"paragraph","content":[{"type":"text","text":"• Font, five colours, text size, max width, alignment, count wording, placeholder lines and labels"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Limits: one stack per section, one thumbnail ratio for built-in rows (a slotted row keeps its own height), images from your project or CMS, and about eighty rows."}]}]},"introduction":"Thumbnail list filtered by chips","slug":"cms-tag-stack","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a081b4-299e-75d0-949d-74b112bddd97.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-08T15:48:06.411Z","updatedAt":"2026-09-08T15:58:57.746Z","publishedAt":"2026-09-08T15:48:06.403Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/cms-tag-stack","price":"14","paymentUrl":"https://payhip.com/b/34DIZ","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"Koal8i0EZhYrqMc8gpGV","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-08T15:48:06.994Z","updatedAt":"2026-09-08T15:48:06.994Z"},{"id":"01a07d1c-e199-701f-8af8-bd2a88125570","title":null,"body":"

New: CMS Tag Rail. One snapping track of fixed-ratio cards, narrowed by tag chips with counts, CMS slots per card, arrows and dots. Third in the CMS Tag family after Masonry and Grid.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New: CMS Tag Rail. One snapping track of fixed-ratio cards, narrowed by tag chips with counts, CMS slots per card, arrows and dots. Third in the CMS Tag family after Masonry and Grid."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"JIypKRGsGxohE8oNHpmZ","resolved":true,"title":"CMS Tag Rail","body":"$63","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CMS Tag Rail lays a collection along one horizontal track of fixed-ratio cards and narrows it with tag chips: a chip press swaps a class, hidden cards leave the track and the rest close up."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Scrolling is the browser's own — a drag, a sideways wheel, or arrow keys on the focused track — and every card snaps to the left edge; side arrows nudge it and a dot per group jumps there."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Pick several tags at once and choose whether a card carries any of them or every one; each chip carries its count, a polite line reads the total showing, and a slot per card binds a CMS collection."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"- **One snapping track.** Cards ride one row and snap to the left edge."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Three ratios.** Square, 4:5 or 16:9 sets every built-in card face."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Chips that stack.** Several tags stay on at once, matching any or every tag."}]},{"type":"paragraph","content":[{"type":"text","text":"- **One class swap.** A chip press swaps classes; the rest is CSS."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Counts on the chips.** Each chip carries its count; a line reads the total."}]},{"type":"paragraph","content":[{"type":"text","text":"- **CMS slots.** One slot per card binds a collection; a slotted card keeps its height."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Arrows, dots and keys.** Arrows nudge the track, dots jump to a group, keys move it."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Styled by you.** Cards per view, peek, gap, radius, font, colours, size and labels."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Items as an array: title, caption, tags as a comma list, image with alt text, link and a tint for the empty face"}]},{"type":"paragraph","content":[{"type":"text","text":"• Card slots for the CMS path, paired one to one with the items"}]},{"type":"paragraph","content":[{"type":"text","text":"• Cards per view, peek, ratio, gap, radius, match mode, initial tags, the All chip, arrows and dots"}]},{"type":"paragraph","content":[{"type":"text","text":"• Font, five colours, text size, max width, alignment, the count wording, the placeholder lines and labels"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Limits: one rail per section, one ratio for the built-in card faces (a slotted card keeps its own height), images from your project or CMS, and about eighty cards."}]}]},"introduction":"Snap carousel filtered by chips","slug":"cms-tag-rail","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a07d1c-4357-716e-ac04-f071a94e223d.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-07T18:23:59.321Z","updatedAt":"2026-09-08T16:24:52.255Z","publishedAt":"2026-09-07T18:23:59.314Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/cms-tag-rail","price":"14","paymentUrl":"https://payhip.com/b/EldhB","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"bVsS9v6l8TIRtDDg51Oa","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-07T18:23:59.897Z","updatedAt":"2026-09-07T18:23:59.897Z"},{"id":"01a07c07-18a5-77b9-aa97-2c3ae5c4dc08","title":null,"body":"

New: CMS Tag Grid. An even grid of fixed-ratio cards narrowed by tag chips, with counts on every chip and CMS slots per card. Second in the CMS Tag family after Tag Masonry.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New: CMS Tag Grid. An even grid of fixed-ratio cards narrowed by tag chips, with counts on every chip and CMS slots per card. Second in the CMS Tag family after Tag Masonry."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"tH7FbqGtFvaovZ18F8T8","resolved":true,"title":"CMS Tag Grid","body":"$64","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CMS Tag Grid lays a collection into an even grid of fixed-ratio cards and narrows it with tag chips: a chip press swaps a class and CSS does the rest, nothing measured and no observer."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Pick several tags at once and choose whether a card carries any of them or every one; each chip shows the count behind it and a polite line reads out the total on screen."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Bind a CMS collection through the card slots, or use the built-in card face at 1:1, 4:5 or 16:9; columns follow the frame, and the Framer canvas shows the finished grid on its first frame."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"- **One even grid.** Every card face shares a ratio, so rows line up."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Three ratios.** Square, 4:5 or 16:9, set once."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Chips that stack.** Several tags stay on at once, matching any tag or every tag."}]},{"type":"paragraph","content":[{"type":"text","text":"- **One class swap.** A chip press swaps classes; the rest is CSS."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Counts on the chips.** Each chip carries its count; a polite line reads the total."}]},{"type":"paragraph","content":[{"type":"text","text":"- **CMS slots.** One component slot per card binds a collection straight into the grid."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Columns that follow the frame.** Auto, or two to four across; a phone holds two."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Styled by you.** Gap, radius, five colours, text size, alignment, max width and every label."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Items as an array: title, caption, tags as a comma list, image with alt text, link and a tint for the empty face"}]},{"type":"paragraph","content":[{"type":"text","text":"• Card slots for the CMS path, paired one to one with the items"}]},{"type":"paragraph","content":[{"type":"text","text":"• Card ratio, column count, gap, radius, match mode, initial tags, the All chip and its label, and alignment"}]},{"type":"paragraph","content":[{"type":"text","text":"• Five colours, text size, max width, the count wording, the placeholder lines and the accessibility labels"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Limits: one grid per section, one ratio for every card face (a slotted card keeps its own height), images from your project or CMS, up to about eighty cards."}]}]},"introduction":"Square gallery filtered by chips","slug":"cms-tag-grid","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a07c05-e174-7498-874d-cdb605b0f87a.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-07T13:20:34.410Z","updatedAt":"2026-09-08T16:24:27.233Z","publishedAt":"2026-09-07T13:20:34.406Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/cms-tag-grid","price":"14","paymentUrl":"https://payhip.com/b/mKf5c","workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"EumbZaVILOYirw6I5Bz0","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-07T13:20:34.982Z","updatedAt":"2026-09-07T13:20:34.982Z"},{"id":"01a07ab7-51d6-7780-81a0-082600f751ab","title":null,"body":"

Pricing sections kept bugging me: every switch to yearly re-rendered the whole grid. This one keeps a single active-tab state and lets CSS roll the numbers, so the glass cards never flicker. Glass Pricing Tabs is up.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Pricing sections kept bugging me: every switch to yearly re-rendered the whole grid. This one keeps a single active-tab state and lets CSS roll the numbers, so the glass cards never flicker. Glass Pricing Tabs is up."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"seEMzqt8rWj0GparHd33","resolved":true,"title":"Glass Pricing Tabs","body":"$65","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Glass Pricing Tabs puts your plans behind a billing switch: press Monthly or Yearly and every figure counts up to its new number, with a save badge on the term that earns it."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Each plan sits on a frosted card with a blurred backdrop, a hairline edge and a highlight sheen, and the plan you feature keeps an accent border and a label you write."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"The tabs answer the arrow keys and read as a real tab list, the section lands complete on the Framer canvas at the first frame, and reduced motion gets the new figures at once."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Key features"}]},{"type":"paragraph","content":[{"type":"text","text":"- **Two or three billing tabs.** Label each term, add a suffix like /mo, and a save badge where it belongs."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Prices that count up.** A tab press rolls every figure to its new number in pure CSS."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Frosted plan cards.** A blurred backdrop, a hairline edge and a highlight sheen, blur set in pixels."}]},{"type":"paragraph","content":[{"type":"text","text":"- **One plan out front.** Mark a plan featured for an accent border and a label you write."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Everything on the card.** Name, description, a price per tab, up to six features and a button with its own link."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Keyboard tabs.** Arrow keys, Home and End move between terms, announced as a real tab list."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Columns you set.** Auto, two, three or four across, and a single column on a phone."}]},{"type":"paragraph","content":[{"type":"text","text":"- **Styled by you.** Five colours, radius, gap, text size, max width, alignment and every label."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Tabs as an array: label, price suffix and a save badge for the longer term"}]},{"type":"paragraph","content":[{"type":"text","text":"• Plans as an array: name, description, a price per tab, features one per line, button label, link and a featured flag"}]},{"type":"paragraph","content":[{"type":"text","text":"• Columns, card gap, radius, max width, alignment, text size and glass blur"}]},{"type":"paragraph","content":[{"type":"text","text":"• Five colours, count-up length, the save badge, the featured label and the accessibility labels"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"One pricing section per page, up to four plans and three billing tabs, with a backdrop glow you can switch off when the section sits on your own gradient."}]}]},"introduction":"Billing toggle with plan cards","slug":"glass-pricing-tabs","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a07ab6-d05a-72ea-b23f-8470de6f76e3.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-07T07:13:48.968Z","updatedAt":"2026-09-08T16:28:38.199Z","publishedAt":"2026-09-07T07:13:48.965Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/glass-pricing-tabs","price":"12","paymentUrl":"https://payhip.com/b/BLw4K","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"DslTHia57Jao0IYpGQla","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-07T07:13:49.526Z","updatedAt":"2026-09-07T07:13:49.526Z"},{"id":"01a079d5-3aba-7639-831d-9ffba3a8937c","title":null,"body":"

Third one this week and the first that isn't a carousel. I wanted a filterable masonry that never re-lays out, so it's CSS columns and a class swap per chip. Took two tries to get the count line to read out properly for screen readers.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Third one this week and the first that isn't a carousel. I wanted a filterable masonry that never re-lays out, so it's CSS columns and a class swap per chip. Took two tries to get the count line to read out properly for screen readers."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"paW44AR270HualSVZVK0","resolved":true,"title":"CMS Tag Masonry","body":"$66","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CMS Tag Masonry lays a collection into real CSS columns and narrows it with tag chips: pick several tags, choose any or every, and the wall settles at once with every surviving card where it was."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Cards are links straight to the work, the filter is pure CSS and the count line reads out loud, so nothing is measured, nothing re-flows, and the canvas shows the finished grid."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Bind a CMS collection through the card slots, set three column counts and a gap, and pick the tags that are on when the page opens."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Key features"}]},{"type":"paragraph","content":[{"type":"text","text":"- Real columns. column-count packs the cards, so your order is the reading order at every width."}]},{"type":"paragraph","content":[{"type":"text","text":"- Chips that stack. Several tags at once, with one switch for any-of or all-of."}]},{"type":"paragraph","content":[{"type":"text","text":"- One repaint. A chip swaps a class; hidden cards fold away and the rest stay put."}]},{"type":"paragraph","content":[{"type":"text","text":"- CMS slots. One component slot per card binds a collection straight into the grid."}]},{"type":"paragraph","content":[{"type":"text","text":"- Cards that link. Title, caption, tag line and a link on the whole card."}]},{"type":"paragraph","content":[{"type":"text","text":"- A count that speaks. Showing 7 of 10, announced politely as chips change."}]},{"type":"paragraph","content":[{"type":"text","text":"- Open on a tag. Start with any tags already on, for a curated first view."}]},{"type":"paragraph","content":[{"type":"text","text":"- Styled by you. Three column counts, gap, radius, chip radius, five colours, text size, max width."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Items as an array: title, caption, comma tags, image, alt text, link, height ratio and a tint"}]},{"type":"paragraph","content":[{"type":"text","text":"• Item slots for the CMS path, paired one to one with the items"}]},{"type":"paragraph","content":[{"type":"text","text":"• Columns for desktop, tablet and phone; gap; radius; chip radius; any-or-every switch; initial tags"}]},{"type":"paragraph","content":[{"type":"text","text":"• All label, count template, empty and no-match text, five colours, text size, max width, chip align"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"One grid per section, images from your own project or CMS, and a card count comfortable up to about forty."}]}]},"introduction":"Filterable CMS gallery grid","slug":"cms-tag-masonry","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a079d4-ca27-7322-9132-d3c8f3441fba.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-07T03:06:51.938Z","updatedAt":"2026-09-08T16:23:25.466Z","publishedAt":"2026-09-07T03:06:51.934Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/cms-tag-masonry","price":"16","paymentUrl":"https://payhip.com/b/F9mOc","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"sQFF2AojoCnfDWrFAYSk","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-07T03:06:52.474Z","updatedAt":"2026-09-07T03:06:52.474Z"},{"id":"01a0795d-a7b7-772f-b6aa-e74a1614fc7a","title":null,"body":"

Second carousel this week, and the opposite problem from the ribbon one: this time the cards kept sliding instead of turning. Moved the pivot below the track so the whole deck rotates like a hand of cards, and the drag finally felt right.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Second carousel this week, and the opposite problem from the ribbon one: this time the cards kept sliding instead of turning. Moved the pivot below the track so the whole deck rotates like a hand of cards, and the drag finally felt right."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"14SAFf3E9lzu549dsh3L","resolved":true,"title":"CMS Splay Carousel","body":"$67","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CMS Splay Carousel opens a collection like a hand of cards: every card turns around one pivot below the track, so the middle card stands upright and on top while the cards beside it lean out and settle lower."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Drag it and the whole fan turns with your finger, or use the wheel, the arrow keys and the dots — one centre index is the whole state, so the deck lands square on a card."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Bind a CMS collection through the card slots, set the spread in degrees and the pivot in pixels, and the canvas shows the finished first frame."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Key features"}]},{"type":"paragraph","content":[{"type":"text","text":"- A pivot you place. Spread in degrees per card, pivot distance in pixels — the fan opens that far."}]},{"type":"paragraph","content":[{"type":"text","text":"- The middle card leads. The centre card stands upright and on top; each step out leans further and fades."}]},{"type":"paragraph","content":[{"type":"text","text":"- Flat and fast. Cards turn in the page plane, so the fan stays crisp at any card size."}]},{"type":"paragraph","content":[{"type":"text","text":"- CMS slots. One component slot per card binds a collection straight into the fan."}]},{"type":"paragraph","content":[{"type":"text","text":"- Five ways to move. Drag, horizontal wheel, arrow keys, dots and arrow buttons."}]},{"type":"paragraph","content":[{"type":"text","text":"- Autoplay in seconds. Set the interval; it rests while a visitor hovers or tabs in."}]},{"type":"paragraph","content":[{"type":"text","text":"- Endless loop. Cards wrap around the fan in both directions."}]},{"type":"paragraph","content":[{"type":"text","text":"- Styled by you. Card size, spacing, radius, five colours, text size, alignment and every label."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Cards as an array: title, caption, image, alt text, link and a tint for the gradient face"}]},{"type":"paragraph","content":[{"type":"text","text":"• Card slots for the CMS path, paired one to one with the cards"}]},{"type":"paragraph","content":[{"type":"text","text":"• Spread in degrees, pivot distance, lift, card width, card ratio, spacing, cards visible each side, radius"}]},{"type":"paragraph","content":[{"type":"text","text":"• Autoplay seconds, loop, edge fade, arrows, dots, five colours, text size, max width, align, labels"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"One fan per section, images from your own project or CMS, and a card count comfortable up to about twenty-four."}]}]},"introduction":"Fanned deck drag gallery carousel","slug":"cms-splay-carousel","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0795d-4609-741f-ac0d-4459b410b23d.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-07T00:56:15.475Z","updatedAt":"2026-09-08T16:23:00.218Z","publishedAt":"2026-09-07T00:56:15.472Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/cms-splay-carousel","price":"14","paymentUrl":"https://payhip.com/b/Olk3P","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"JfCk2EfCU5oQ6IBPj1Ft","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-07T00:56:16.055Z","updatedAt":"2026-09-07T00:56:16.055Z"},{"id":"01a07828-58c1-76be-a896-8f4de4730796","title":null,"body":"

Spent most of last night on the maths for a carousel that curves like a ribbon instead of a flat strip. The part that kept breaking was the middle card: every version blurred it along with the rest. Fixed now, and the CMS slots were the easy bit.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Spent most of last night on the maths for a carousel that curves like a ribbon instead of a flat strip. The part that kept breaking was the middle card: every version blurred it along with the rest. Fixed now, and the CMS slots were the easy bit."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"mz5T5WIQHJR5wh6fdMQx","resolved":true,"title":"CMS Ribbon Carousel","body":"$68","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CMS Ribbon Carousel bends a collection into a ribbon: cards curve away in 3D, the middle one stays sharp and upright, and the cards beside it tilt, sink and soften."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Drag it, flick the wheel, press the arrow keys or tap a dot — one centre index is the whole state, so the ribbon always lands on a card."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Bind a CMS collection through the card slots, set curve, depth and spacing in degrees and pixels, and the canvas shows the finished first frame."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Key features"}]},{"type":"paragraph","content":[{"type":"text","text":"- Ribbon curvature. Tilt, depth and scale grow with each step from the centre, in degrees you set."}]},{"type":"paragraph","content":[{"type":"text","text":"- The middle card leads. Side cards soften and fade, so one card reads first at any width."}]},{"type":"paragraph","content":[{"type":"text","text":"- CMS slots. One component slot per card binds a collection straight into the ribbon."}]},{"type":"paragraph","content":[{"type":"text","text":"- Four ways to move. Pointer drag with snap, horizontal wheel, arrow keys, dots and arrow buttons."}]},{"type":"paragraph","content":[{"type":"text","text":"- Autoplay in seconds. Set the interval; it rests while a visitor hovers or tabs into the track."}]},{"type":"paragraph","content":[{"type":"text","text":"- Endless loop. Cards wrap around the ribbon, so the track keeps going in both directions."}]},{"type":"paragraph","content":[{"type":"text","text":"- Reduced motion honoured. Ask for less movement and the same cards arrive in place instantly."}]},{"type":"paragraph","content":[{"type":"text","text":"- Styled by you. Card size, gap, radius, five colours, text size, alignment and every label."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Cards as an array: title, caption, image, alt text, link and a tint for the gradient face"}]},{"type":"paragraph","content":[{"type":"text","text":"• Card slots for the CMS path, paired one to one with the cards"}]},{"type":"paragraph","content":[{"type":"text","text":"• Curve in degrees, depth, perspective, card width, gap, cards visible each side, radius"}]},{"type":"paragraph","content":[{"type":"text","text":"• Autoplay seconds, loop, edge softening, arrows, dots, five colours, text size, max width, align, labels"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"One ribbon per section, images from your own project or CMS, and a card count that stays comfortable up to about twenty-four."}]}]},"introduction":"Curved 3D drag gallery carousel","slug":"cms-ribbon-carousel","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a07827-c6ec-77c9-82a4-5bf74232d595.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-06T19:18:24.689Z","updatedAt":"2026-09-08T16:22:12.988Z","publishedAt":"2026-09-06T19:18:24.686Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/cms-ribbon-carousel","price":"14","paymentUrl":"https://payhip.com/b/PpAtN","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"0sxBKuLsgTdgJ2m7GpB8","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-06T19:18:25.217Z","updatedAt":"2026-09-06T19:18:25.217Z"},{"id":"01a0773f-c04a-7073-809f-84fca93ffe24","title":null,"body":"

Made this after seeing one too many size charts shipped as a screenshot nobody could read on a phone. The cm/in switch lives inside the component; the page around it is never touched.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Made this after seeing one too many size charts shipped as a screenshot nobody could read on a phone. The cm/in switch lives inside the component; the page around it is never touched."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Rqst1m2zffJoNk7rujmK","resolved":true,"title":"Aisol Size Guide","body":"$69","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Size Guide lays out one garment's size chart — sizes down the rows, measurements across the columns — from your own content or a CMS collection, with one switch that turns the whole chart from centimetres to inches."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"It is a real table with a caption and row and column headers; on phones the same table becomes one card per size, in CSS, so screen readers get the same structure everywhere."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Nothing is observed, measured or animated: the unit switch is two buttons with a pressed state inside the component, no storage and no hash, and the Framer canvas shows the finished chart on the first paint."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"- Sizes as rows: label, a note like \"The size most people take\", and a highlight for the one you want seen first."}]},{"type":"paragraph","content":[{"type":"text","text":"- Measurements as columns: name plus a per-column switch so ages or ratings never get converted."}]},{"type":"paragraph","content":[{"type":"text","text":"- Values you write: single numbers and ranges convert to inches with one decimal; anything else stays exactly as written."}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional \"How to measure\" notes as a numbered list; empty state text instead of a blank frame. Colours given as rgb() reach the page unchanged."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Sizes as an array: label, note, highlight — or bind a CMS collection through the size slots"}]},{"type":"paragraph","content":[{"type":"text","text":"• Measurements as an array: name, converts on/off, up to six columns"}]},{"type":"paragraph","content":[{"type":"text","text":"• Unit switch on/off and the starting unit, stack breakpoint, heading and caption text, the words behind the switch, empty-cell and empty-state text, measuring notes"}]},{"type":"paragraph","content":[{"type":"text","text":"• Accent, text, muted, line, header, highlight and card colours; card on/off; text size; max width (0 = fill); radius; gap; left or centred"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Limits: one garment per chart by design; six measurement columns is the cap so the table stays readable. Conversion covers centimetres to inches only. Size slots pair by index with the sizes array."}]}]},"introduction":"Size chart, cm or in, CMS-ready","slug":"aisol-size-guide","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0773f-3ced-74c7-b13e-4f8e2dcd2247.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-06T15:04:21.288Z","updatedAt":"2026-09-07T10:31:12.232Z","publishedAt":"2026-09-06T15:04:21.285Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/aisol-size-guide","price":"8","paymentUrl":"https://payhip.com/b/woRMl","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"fgyRYX1VKytGO2D4vBkA","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-06T15:04:21.834Z","updatedAt":"2026-09-06T15:04:21.834Z"},{"id":"01a07691-7f5a-713b-a43c-53d776ec35ee","title":null,"body":"

New: Aisol Spec Sheet - one product's specifications as grouped label-value rows from your CMS. A real definition list, sheet or card layout, zero motion.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New: Aisol Spec Sheet - one product's specifications as grouped label-value rows from your CMS. A real definition list, sheet or card layout, zero motion."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"TxEisRaeS1U5svh8Vro7","resolved":true,"title":"Aisol Spec Sheet","body":"$6a","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Spec Sheet lays out the specifications of one product or service as labelled rows under group headings — dimensions, materials, what is included — from your own content or a CMS collection."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"It is a real definition list, not a table: each group is a heading at the level you choose, each row a term and its value, so a screen reader reads it as what it is."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Nothing is observed, measured or animated: the group jump links scroll only the component's own headings, no hash is written, and the Framer canvas shows the finished sheet on the first paint."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"- Groups with an optional note, and rows that match a group by name — write the rows once, reorder the groups freely."}]},{"type":"paragraph","content":[{"type":"text","text":"- Per row: label, value as a string you write, an optional note under the value, and a highlight flag for the rows that matter."}]},{"type":"paragraph","content":[{"type":"text","text":"- Values that are exactly yes or no become check and cross icons with the words behind them; anything else stays as text."}]},{"type":"paragraph","content":[{"type":"text","text":"- Two layouts: a two-column sheet that stacks label over value on phones, or grouped cards in two columns that fall to one under a width you set."}]},{"type":"paragraph","content":[{"type":"text","text":"- Empty state text instead of a blank frame. Colours given as rgb() reach the page unchanged."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Groups as an array: name and note — or bind a CMS collection through the row slots"}]},{"type":"paragraph","content":[{"type":"text","text":"• Rows as an array: group, label, value, note, highlight — rows whose group matches nothing land in one final group you name"}]},{"type":"paragraph","content":[{"type":"text","text":"• Sheet or columns layout, stack breakpoint, label column width, group jump nav on/off, heading level, region label, empty-cell and empty-state text"}]},{"type":"paragraph","content":[{"type":"text","text":"• Accent, text, muted, line, label fill, highlight fill and card colours; card on/off; text size; max width (0 = fill); radius; gap; left or centred"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Limits: one product per sheet by design — for two to four products side by side, use Aisol Compare Table. Values are strings; there is no unit conversion. Row slots pair by index with the flat rows array, not with a group."}]}]},"introduction":"Product specs by group, CMS-ready","slug":"aisol-spec-sheet","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a07691-1002-76b0-ba6d-143d6e9a20ec.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-06T11:54:01.383Z","updatedAt":"2026-09-08T17:05:45.811Z","publishedAt":"2026-09-06T11:54:01.381Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/aisol-spec-sheet","price":"8","paymentUrl":"https://payhip.com/b/nMD2C","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"onIitYCCH5s72kqvrzbp","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-06T11:54:01.946Z","updatedAt":"2026-09-06T11:54:01.946Z"},{"id":"01a07627-4ea9-7128-a014-76f2dfbf12c9","title":null,"body":"

New: Aisol Menu Board - a cafe or course menu by category from your CMS. Dotted price leaders or cards, dietary tags, jump nav, zero motion.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New: Aisol Menu Board - a cafe or course menu by category from your CMS. Dotted price leaders or cards, dietary tags, jump nav, zero motion."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"8Zu0R6saewfPeKEItMSC","resolved":true,"title":"Aisol Menu Board","body":"$6b","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Menu Board lays out a cafe, kitchen or course menu by category — each item with a name, description, price, badge and dietary tags — from your own content or a CMS collection."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Prices sit right-aligned behind a dotted CSS leader in list layout, or on two columns of cards that fall to one under a width you set. Either way it is a real list under real headings, and every price carries a hidden \"Price\" label for screen readers."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Nothing is observed, measured or animated: the category jump links scroll only the component's own headings, no hash is written, and the Framer canvas shows the finished menu on the first paint."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"- Categories with an optional note, and items that match a category by name — write the items once, reorder the categories freely."}]},{"type":"paragraph","content":[{"type":"text","text":"- Per item: name, description, price as a string you write, a badge like \"New\", dietary tags as one comma-separated string that becomes chips, and an optional image."}]},{"type":"paragraph","content":[{"type":"text","text":"- List or cards layout, optional jump nav, currency prefix and suffix, empty state text. Colours given as rgb() reach the page unchanged."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Categories as an array: name and note — or bind a CMS collection through the item slots"}]},{"type":"paragraph","content":[{"type":"text","text":"• Items as an array: category, name, description, price, badge, tags, image, alt — unmatched items land in one final group you name"}]},{"type":"paragraph","content":[{"type":"text","text":"• Layout, stack breakpoint, dotted leader, images, jump nav, heading level, region label, the hidden \"Price\" label, currency prefix and suffix, empty-state text"}]},{"type":"paragraph","content":[{"type":"text","text":"• Accent, text, muted, line, badge, tag and card colours; card on/off; text size; max width (0 = fill); radius; gap; left or centred"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Limits: prices are strings — no currency maths, sorting or cart. Items match categories by name; item slots pair by index with the flat items array."}]}]},"introduction":"Cafe and course menus, CMS-ready","slug":"aisol-menu-board","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a07626-3f8f-779d-b177-b36718647dcd.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-06T09:58:02.111Z","updatedAt":"2026-09-07T10:33:24.248Z","publishedAt":"2026-09-06T09:58:02.109Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/aisol-menu-board","price":"8","paymentUrl":"https://payhip.com/b/cDzBV","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"a8aTkP5Xyrt4N95OcO6s","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-06T09:58:02.665Z","updatedAt":"2026-09-06T09:58:02.665Z"},{"id":"01a074dd-d1ac-7439-a6c7-0d7ab9c3ae7e","title":null,"body":"

New: Aisol Compare Table - two to four plans or products side by side from your CMS. A real table with sticky header, stacked cards on phones, zero motion.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New: Aisol Compare Table - two to four plans or products side by side from your CMS. A real table with sticky header, stacked cards on phones, zero motion."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"mRXu8JwHyai7VqD9WuiG","resolved":true,"title":"Aisol Compare Table","body":"$6c","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Compare Table sets two to four plans side by side — features down the rows, plans across the columns — from your own content or a CMS collection."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"It is a real HTML table with a caption, column and row headers, and check or cross cells that carry the words \"Included\" and \"Not included\" for screen readers."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"The sticky header, the highlighted column and the stack-to-cards breakpoint are CSS inside the component's own wrapper; nothing outside it is read, measured or animated, and the Framer canvas shows the finished table."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"- Two to four columns: name, price, note, a CTA label and link, and one column you can mark as the plan you want chosen."}]},{"type":"paragraph","content":[{"type":"text","text":"- Rows take any value — \"yes\", \"no\", or free text like \"8 students\" — and yes/no become icons with the words behind them, never a bare symbol or a colour alone."}]},{"type":"paragraph","content":[{"type":"text","text":"- Sticky header on or off, stack to one card per column under a breakpoint you set, empty state text instead of a blank frame. Colours given as rgb() reach the page unchanged."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Columns as an array: name, price, note, CTA label, link, highlight — or bind a CMS collection through the column slots"}]},{"type":"paragraph","content":[{"type":"text","text":"• Rows as an array: a feature label plus one value per column; \"yes\"/\"no\" render as icons, anything else stays as text"}]},{"type":"paragraph","content":[{"type":"text","text":"• Sticky header on/off, stack breakpoint, heading level, caption text (visible or screen-reader only), empty-state text, and the words behind the yes/no icons"}]},{"type":"paragraph","content":[{"type":"text","text":"• Accent, text, muted, line, header, highlight and yes/no colours; card on/off; text size; max width (0 = fill); radius; cell padding; left or centred"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Limits: four columns is the cap — past that the table stops being readable on a phone, so extra columns are ignored. Column slots pair by index with the columns array. There is no billing toggle and no pricing maths; prices are strings you write."}]}]},"introduction":"Products side by side, CMS-ready","slug":"aisol-compare-table","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a074dd-6b26-76ea-a192-61a80608886e.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-06T03:58:08.801Z","updatedAt":"2026-09-07T10:33:45.845Z","publishedAt":"2026-09-06T03:58:08.798Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/aisol-compare-table","price":"8","paymentUrl":"https://payhip.com/b/6jUaW","workshop":false,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"WDIH3TReNTxfI4dUUleq","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-06T03:58:09.324Z","updatedAt":"2026-09-06T03:58:09.324Z"},{"id":"01a073e3-e4c1-75de-8e69-0e4222510cd5","title":null,"body":"

New: Aisol Process Steps - numbered how-it-works steps from your CMS, connected and revealed in view. Reduced motion and the canvas get the finished list.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New: Aisol Process Steps - numbered how-it-works steps from your CMS, connected and revealed in view. Reduced motion and the canvas get the finished list."}]}]},"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"OKTUY7fI0pQIPZYEzSRH","resolved":true,"title":"Aisol Process Steps","body":"$6d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Process Steps lays out \"how it works\" steps from a CMS collection — numbered, connected, and readable before any script runs."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Steps reveal as they enter the viewport using an observer on the component's own items only; the Framer canvas shows every step already finished."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Reduced motion gets the finished list with no observer at all; keyboard and screen-reader users get a real ordered list with real links."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"- Vertical or horizontal direction; the horizontal rail stacks under a breakpoint you set, and the connector hides itself when it would misalign."}]},{"type":"paragraph","content":[{"type":"text","text":"- Numbers, dots or no markers; a connector line between markers; per-step eyebrow, image, description and a link on the title only."}]},{"type":"paragraph","content":[{"type":"text","text":"- Empty state text instead of a blank frame. Colours given as rgb() reach the page unchanged."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Steps as an array: eyebrow, title, description, image or image URL, alt text, link — or bind a CMS collection through the step slots"}]},{"type":"paragraph","content":[{"type":"text","text":"• Direction, stack breakpoint, numbering style, connector on/off"}]},{"type":"paragraph","content":[{"type":"text","text":"• Reveal on/off, stagger and duration; heading level for step titles; region label for screen readers; empty-state text"}]},{"type":"paragraph","content":[{"type":"text","text":"• Accent, text, muted, line and card colours; card on/off; text size; max width (0 = fill); radius; gap; left or centred"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Limits: the reveal runs once per step by design. Step slots pair by index with the steps array."}]}]},"introduction":"How-it-works steps, CMS-ready","slug":"aisol-process-steps","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a073e3-780a-72b8-b0a4-3b2593cacd5c.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-05T23:25:09.169Z","updatedAt":"2026-09-08T16:51:05.448Z","publishedAt":"2026-09-05T23:25:09.154Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/aisol-process-steps","price":"12","paymentUrl":"https://payhip.com/b/EV4BN","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"gRvkgt3SiExpw21PAUo7","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-05T23:25:10.209Z","updatedAt":"2026-09-05T23:25:10.209Z"},{"id":"01a06f00-8997-7300-8c4c-851a3f257d1a","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"09Q1XTGsRliuIg10SCFv","resolved":true,"title":"Aisol Dossier","body":"$6e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Dossier is a folder that opens on hover, focus or click and fans out up to five cards — title, note, image and a link on each. Cards without an image get a drawn poster, never a blank. It is free, and it is the entry point to the Aisol motion series (Aisol Reel Rail, Aisol Quote Motion)."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"One open state drives everything. The fan is CSS on that state, so nothing is measured, no observer is attached, and the canvas shows the folder already open."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"- Opens on hover or focus, or on click only; Escape closes it either way. The open button carries aria-expanded and controls the card region."}]},{"type":"paragraph","content":[{"type":"text","text":"- Card links are reachable only while the folder is open, so keyboard users never land on hidden cards."}]},{"type":"paragraph","content":[{"type":"text","text":"- Under prefers-reduced-motion the folder still opens — it just skips the transition."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Cards as an array: title, note, image or image URL, alt text, link — or bind a CMS collection through the card slots (up to five)"}]},{"type":"paragraph","content":[{"type":"text","text":"• Tab label, sticker, pocket title and pocket meta text; opens on hover/focus or click only; start open"}]},{"type":"paragraph","content":[{"type":"text","text":"• Spread (degrees) and lift (percent) of the fan; radius; max width (0 = fill the frame)"}]},{"type":"paragraph","content":[{"type":"text","text":"• Open and close labels for screen readers; empty-state text; text size"}]},{"type":"paragraph","content":[{"type":"text","text":"• Folder, tab, paper, accent, text and muted colours"}]},{"type":"paragraph","content":[{"type":"text","text":"• Card slots: give the slotted frame a height of 100% so it fills the card"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Limits: five cards by design (the fan stays readable). Paid series: Aisol Reel Rail ($12) and Aisol Quote Motion ($10)."}]}]},"introduction":"A folder that fans out on hover","slug":"aisol-dossier","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a06f00-57aa-7495-a61e-c4a1a2617775.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-05T00:38:20.741Z","updatedAt":"2026-09-07T10:48:19.103Z","publishedAt":"2026-09-05T00:38:20.738Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/AisolDossier-W5f889.js@oglY24NQ0KAECAZH7vbk","previewUrl":"https://thistle-timing-694660.framer.app/aisol-dossier","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"oglY24NQ0KAECAZH7vbk","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-05T00:38:21.335Z","updatedAt":"2026-09-05T00:38:21.335Z"},{"id":"01a06cf2-6b52-751a-8bbb-bdba50274a99","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ydsnG10MRzFtJUDJD2Dg","resolved":true,"title":"Aisol Stat Counters","body":"$6f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Stat Counters counts up your numbers from a CMS collection, and stops being clever when it should."}]},{"type":"paragraph","content":[{"type":"text","text":"Screen readers hear the final figure once, not every frame; the digits themselves are hidden from them."}]},{"type":"paragraph","content":[{"type":"text","text":"Reduced motion gets the finished numbers with no animation and no observer, and so does the Framer canvas."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"- Values stay text. `1,240`, `98.5`, `$12` and `24/7` all work. Anything that reads as a number counts up; anything else is shown exactly as typed."}]},{"type":"paragraph","content":[{"type":"text","text":"- Mistakes are visible where they should be. If a value cannot be read as a number, the Framer canvas shows a short note naming the value and the accepted formats. The published page never shows that note — it just prints your text."}]},{"type":"paragraph","content":[{"type":"text","text":"- Counting starts when the row is seen, using an observer on the component's own items, which disconnects after the first pass. No scroll listeners, no measuring."}]},{"type":"paragraph","content":[{"type":"text","text":"- Prefix, suffix, label and a small note per number. Links go on the label rather than the digits, so a screen reader announces the number and the link separately."}]},{"type":"paragraph","content":[{"type":"text","text":"- Columns step four, two, one; dividers disappear once the row becomes a column. Breakpoints live in CSS inside the component, so the canvas matches the page."}]},{"type":"paragraph","content":[{"type":"text","text":"- Locale-aware thousands separators and decimal places taken from how you typed the value."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Numbers as an array: value, prefix, suffix, label, note, link — or bind a CMS collection through the number cards slots"}]},{"type":"paragraph","content":[{"type":"text","text":"• Count up on or off, duration, when it starts, locale for digit grouping"}]},{"type":"paragraph","content":[{"type":"text","text":"• Columns 1–4 with two step-down breakpoints, alignment, dividers, notes on or off"}]},{"type":"paragraph","content":[{"type":"text","text":"• Digit size, text size, gap, padding; accent, text, muted and divider colours; empty-state text"}]}]},"introduction":"Numbers that count up, quietly","slug":"aisol-stat-counters","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a06cf2-40b5-712b-93af-6dd4d607d9c1.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-04T15:03:41.100Z","updatedAt":"2026-09-07T10:50:45.010Z","publishedAt":"2026-09-04T15:03:41.093Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/aisol-stat-counters","price":"12","paymentUrl":"https://payhip.com/b/UsJdF","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"uCVCje7Z2UfDiI5QQJRC","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-04T15:03:41.651Z","updatedAt":"2026-09-04T15:03:41.651Z"},{"id":"01a06cf0-acc1-731c-8241-6cbe66f0a653","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"VRwPETdjyxPLg5KVDOKK","resolved":true,"title":"Aisol Quote Motion","body":"$70","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Quote Motion is one testimonial carousel with three motions: slide, stamp — cards land on a small stack — and fade. Switching is a control, not a different component."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"One index drives everything. The motion is CSS on that index, so nothing is measured, no observer is attached, and the canvas shows the first quote at rest."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"- Autoplay pauses while the visitor hovers or focuses the carousel, and turns off under prefers-reduced-motion — the arrows and dots still work."}]},{"type":"paragraph","content":[{"type":"text","text":"- Screen readers get one quote at a time; the position (\"Quote 2 of 4\") is announced politely, never the whole stack."}]},{"type":"paragraph","content":[{"type":"text","text":"- Stars, a source badge, an avatar (or initials when there is no photo) and a link per quote."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Quotes as an array: quote, author, role, avatar image or URL, rating, source, link — or bind a CMS collection through the quote slots"}]},{"type":"paragraph","content":[{"type":"text","text":"• Motion: slide, stamp or fade; autoplay seconds (0 turns it off)"}]},{"type":"paragraph","content":[{"type":"text","text":"• Arrows, dots, stars and avatars on or off; left or centred"}]},{"type":"paragraph","content":[{"type":"text","text":"• Max width, radius, padding, text size; region label and position wording for screen readers; empty-state text"}]},{"type":"paragraph","content":[{"type":"text","text":"• Accent, text, muted and card colours"}]},{"type":"paragraph","content":[{"type":"text","text":"• Quote slots: give the slotted frame a height of 100% so it fills the card (all cards share the tallest card's height)"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Limits: one quote is visible at a time by design (use Aisol Review Wall for a grid)."}]}]},"introduction":"Testimonials with three motions","slug":"aisol-quote-motion","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a06cf0-6319-747e-a676-dc0f29550732.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-04T15:01:46.722Z","updatedAt":"2026-09-07T10:49:47.231Z","publishedAt":"2026-09-04T15:01:46.719Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/aisol-quote-motion","price":"10","paymentUrl":"https://payhip.com/b/syYBn","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"PqtCs5tMMQtj843NFiWf","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-04T15:01:47.329Z","updatedAt":"2026-09-04T15:01:47.329Z"},{"id":"01a06cee-a2a1-734a-b15a-b96347cc0db1","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"jJmmOFVxPOBI9eyo2vJX","resolved":true,"title":"Aisol Reel Rail","body":"$71","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Reel Rail is a horizontal rail of video cards where only the card in focus plays. Every other card holds its poster, so a page with ten clips downloads and decodes one at a time."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Focus comes from each card's own intersection ratio inside the rail. There are no scroll listeners and no measuring anywhere in the component — the browser keeps doing the scrolling and snapping, and the canvas stays still."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"- Reduced motion is respected properly: autoplay turns off and every card gets a play button instead, so the clips are still reachable."}]},{"type":"paragraph","content":[{"type":"text","text":"- The canvas shows posters only — no video element is created until the page is live."}]},{"type":"paragraph","content":[{"type":"text","text":"- Playback is driven directly (play/pause on the element), so switching cards actually switches the clip."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Reels as an array: title, subtitle, badge, video file or URL, poster image or URL, alt text, link — or bind a CMS collection through the reel slots"}]},{"type":"paragraph","content":[{"type":"text","text":"• Shape: portrait 9:16, landscape 16:9 or square"}]},{"type":"paragraph","content":[{"type":"text","text":"• Plays: the card in focus, on hover, or button only; loop on or off"}]},{"type":"paragraph","content":[{"type":"text","text":"• Turn and shrink for the cards leaving the centre, card width, gap, radius, arrows"}]},{"type":"paragraph","content":[{"type":"text","text":"• Card heading level, rail name and play/pause labels for screen readers, empty-state text"}]},{"type":"paragraph","content":[{"type":"text","text":"• Text size; accent, text, muted and card colours"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Limits: one clip plays at a time by design. Clips are muted (browsers require it for autoplay)."}]}]},"introduction":"Video cards — one plays at a time","slug":"aisol-reel-rail","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a06cee-5ae1-74d5-b345-a08bb1e7f4cb.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-04T14:59:33.122Z","updatedAt":"2026-09-07T10:50:01.178Z","publishedAt":"2026-09-04T14:59:33.117Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/aisol-reel-rail","price":"12","paymentUrl":"https://payhip.com/b/uzQU3","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"AkMxGgWskjQEXcfN9GHl","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-04T14:59:33.666Z","updatedAt":"2026-09-04T14:59:33.666Z"},{"id":"01a067e3-7af7-706f-b5f6-ef0e650cc213","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"tAOE4bA24NrUtgHxtvx4","resolved":true,"title":"Aisol Services Wall","body":"$72","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Services Wall is a services section that runs on your CMS collection, not on a copy of your content."}]},{"type":"paragraph","content":[{"type":"text","text":"Every item is reachable by keyboard and announced properly by a screen reader — nothing is hidden behind hover."}]},{"type":"paragraph","content":[{"type":"text","text":"Motion respects prefers-reduced-motion, and the Framer canvas renders exactly what the published page renders."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"- Three layouts in one component. Split (media and text alternating sides), cards, or compact rows. Switching is a control, not a different component."}]},{"type":"paragraph","content":[{"type":"text","text":"- Reveal without measuring. Items appear as they enter the viewport using an observer on this component's own items — no scroll listeners, no element measuring, nothing read from the page around it."}]},{"type":"paragraph","content":[{"type":"text","text":"- Reduced motion means no observer at all. Visitors who ask for less motion get the plain section immediately, with none of the machinery running."}]},{"type":"paragraph","content":[{"type":"text","text":"- No image? Still finished. An item falls back to an emoji icon, then to a numbered badge — no empty grey panels while you wait for artwork."}]},{"type":"paragraph","content":[{"type":"text","text":"- Bullets, a small label, a link per item, and a heading level you choose. Media ratio is CSS aspect-ratio, so nothing jumps as images load."}]},{"type":"paragraph","content":[{"type":"text","text":"- Columns step down on their own: three, two, one. The breakpoints live in CSS inside the component, so the canvas matches the live page."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Layout: split (media and text alternating), cards, or compact rows; columns 1–4 with two step-down breakpoints"}]},{"type":"paragraph","content":[{"type":"text","text":"• Media ratio, reveal on scroll or off, title level, label and bullets on or off"}]},{"type":"paragraph","content":[{"type":"text","text":"• Per service: title, blurb, label, icon, image and alt text, bullets, link and link text"}]},{"type":"paragraph","content":[{"type":"text","text":"• Service cards slots — bind a CMS collection, slot 1 replaces service 1"}]},{"type":"paragraph","content":[{"type":"text","text":"• Gap, radius, text size, padding; accent, text, muted, media fill and border colours; empty-state text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"More components at Aisol Studio → https://thistle-timing-694660.framer.app/"}]}]},"introduction":"Services section on your CMS","slug":"aisol-services-wall","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a067e3-2679-7249-a8cb-3c6d5e8442d4.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-03T15:29:15.984Z","updatedAt":"2026-09-08T17:04:29.323Z","publishedAt":"2026-09-03T15:29:15.980Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/aisol-service-showcase","price":"10","paymentUrl":"https://payhip.com/b/kehUu","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"WlTaQb1Oq9g9yQOWf049","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-03T15:29:16.535Z","updatedAt":"2026-09-03T15:29:16.535Z"},{"id":"01a067df-eee2-705a-85f1-7f1e957dca06","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"KGj9KiJliaBaiIYnGTZt","resolved":true,"title":"Aisol Flow Map","body":"$73","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Flow Map draws a small diagram: labelled nodes in a grid, and connecting lines between them. Use it for a course path, an admissions flow, a process with a branch in the middle."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Nodes are placed by grid cell — column and row, not pixels — and the connectors are drawn in the same grid coordinates. That is the whole trick: nothing is measured, so the diagram cannot drift when a font loads or a container resizes, and the Framer canvas stays still."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Flow reads left to right, top to bottom; each step leads to the next. There are no arrowheads by design — a stretched SVG marker distorts — so direction is carried by the order and by wording you control."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"- Reduced motion is respected properly: when the visitor has motion turned off, the animation does not run and the observer is never attached."}]},{"type":"paragraph","content":[{"type":"text","text":"- Nothing is measured. No getBoundingClientRect, no scroll listeners, no layout reads — so the Framer canvas stays still while you work."}]},{"type":"paragraph","content":[{"type":"text","text":"- The static renderer is a separate, pure branch: no observers, no timers, no transitions. What you see on the canvas is the finished state."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Nodes: key, label, note, grid column and row, tone (default / accent / optional), link"}]},{"type":"paragraph","content":[{"type":"text","text":"• Connections: from, to, dashed or solid, and which way the elbow turns"}]},{"type":"paragraph","content":[{"type":"text","text":"• Grid size, gap, radius, line width, line colour"}]},{"type":"paragraph","content":[{"type":"text","text":"• Draw-in animation with duration and stagger, or off"}]},{"type":"paragraph","content":[{"type":"text","text":"• Heading level, text size, five colours"}]},{"type":"paragraph","content":[{"type":"text","text":"• Bind a CMS collection through the node slots"}]},{"type":"paragraph","content":[{"type":"text","text":"• Map name for screen readers, the leads-to wording used on phones, and the empty-state text"}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"On phones the lines are dropped and each node says where it leads in words — the connections survive the layout change instead of disappearing with the drawing. A connection pointing at a key that does not exist is skipped rather than drawn wrong, and screen readers get the relationships as a sentence."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"More components at Aisol Studio → https://thistle-timing-694660.framer.app/"}]}]},"introduction":"Steps, and the lines between","slug":"aisol-flow-map","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a067df-910e-702d-bee9-048eb8d6119a.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-03T15:25:23.361Z","updatedAt":"2026-09-07T10:49:03.054Z","publishedAt":"2026-09-03T15:25:23.358Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/aisol-flow-map","price":"8","paymentUrl":"https://payhip.com/b/St8Jf","workshop":false,"categories":[{"id":"8ee0cfdd-bc84-44cf-aa9c-54c86b5c56e0","name":"Maps","slug":"maps"}],"lastSaveId":"KZhUNJ8JecrinlYseeBB","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-03T15:25:24.067Z","updatedAt":"2026-09-03T15:25:24.067Z"},{"id":"01a063fd-49b6-773f-8beb-e6bc1e26ac34","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"PiG9rgr3aM994hwxXp4P","resolved":true,"title":"Aisol Catalogue Nav","body":"$74","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Catalogue Nav is a navigation bar for shops and catalogues: top-level menus that open a wide panel with link columns and featured cards, and a mobile drawer that drills down one level at a time."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"It stays inside its own root. Focus is tracked within the component rather than read from the document, the open panel is reached by ref instead of a global id lookup, and the drawer traps Tab by cycling its own focusable elements — so nothing outside the component is read or written."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Keyboard: ArrowDown on a menu opens its panel and moves focus to the first link; Escape closes and returns focus to the trigger. The mobile drawer keeps Tab inside itself and starts on the close button. Reduced motion is respected; the static renderer draws the closed bar with no observers or timers."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control: menus, link columns, featured cards, and a promo slot · open on hover or on click, with a hover delay · brand logo or text, and the link the brand points to · drawer labels (menu name, back), breakpoint, colours and radius."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Sits beside SaaS Nav Kit, not on top of it: that one is a product-site navbar with a mega menu and drawer; this one is built for catalogue depth — many columns, featured cards, and a drill-down drawer."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Part of the Aisol component library — 19+ production-ready components. Full paid set: framer.com/@ulz-song · store: payhip.com/AisolStudio"}]}]},"introduction":"Catalogue nav with featured cards","slug":"aisol-catalogue-nav","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a063fd-094f-77e8-a487-38e29d17a49a.jpg","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1440,"height":663}}],"post":null,"createdAt":"2026-09-02T21:18:58.430Z","updatedAt":"2026-09-08T17:46:04.005Z","publishedAt":"2026-09-02T21:18:58.427Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/commerce-mega-menu","price":"12","paymentUrl":"https://payhip.com/b/qcOUl","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"PrjmNImGyKyHACy9vE38","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-02T21:18:58.998Z","updatedAt":"2026-09-02T21:18:58.998Z"},{"id":"01a063f9-3d69-772e-9006-f13824a6b2da","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[],"resources":[{"id":"WRZqPJpyB3jRSVw25oEy","resolved":true,"title":"Aisol Depth Cards","body":"$75","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Depth Cards is a horizontal rail where each card turns away as it leaves the centre — a little rotation, a little scale, a little fade — so the row reads as depth instead of a flat strip."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"The depth comes from each card's own intersection ratio, not from geometry. There is no scrollLeft read and no rect measurement anywhere in the component; the browser keeps doing the scrolling and snapping it is already good at."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Reduced motion is respected properly: when the visitor has motion turned off, the animation does not run and the observer is never attached. Nothing is measured — no getBoundingClientRect, no scroll listeners, no layout reads — so the Framer canvas stays still while you work. The static renderer is a separate, pure branch: no observers, no timers, no transitions. What you see on the canvas is the finished state."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"What you control: turn angle, shrink and fade (set any to zero for a flatter rail) · card width, gap, corner radius · arrows on or off (they scroll the rail, they do not rebuild it) · heading level for card titles, text size, four colours · cards as a plain array, or bind a CMS collection through the card slots · rail name for screen readers, and the empty-state text."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Cards without an image draw a soft tinted block from the title rather than an empty grey box, so a half-filled collection still looks finished. Card width steps down at tablet width and becomes screen-relative on phones — the page itself never scrolls sideways, only the rail does."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Part of the Aisol component library — 19+ production-ready components. Full paid set: framer.com/@ulz-song · store: payhip.com/AisolStudio"}]}]},"introduction":"Cards that turn as they pass","slug":"aisol-depth-cards","author":{"framerUserId":"82d016d2-8113-4080-8f2a-7c3796dceab4","name":"ulz song","slug":"ulz-song","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/cyjym4k1","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a063f9-03c6-76e7-a0b1-1347169c017c.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-02T21:14:33.132Z","updatedAt":"2026-09-07T10:40:42.344Z","publishedAt":"2026-09-02T21:14:33.116Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/aisol-depth-cards","price":"7","paymentUrl":"https://payhip.com/b/Vv5mL","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"52P3s7RTzN2Tgo86fZuR","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-02T21:14:33.706Z","updatedAt":"2026-09-02T21:14:33.706Z"}],"pagination":{"next":"MDFhMDYzZjktM2Q2OS03NzJlLTkwMDYtZjEzODI0YTZiMmRh","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L76"}]