65:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3bibva_hl5iqy.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3o8r_4s04xi2z.js","/creators-assets/_next/static/immutable/chunks/2fjwvdycfnlp5.js","/creators-assets/_next/static/immutable/chunks/0r10zdsyx-ur2.js","/creators-assets/_next/static/immutable/chunks/1cuuzi60s_xh3.js","/creators-assets/_next/static/immutable/chunks/0h4bpdjiu20m1.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3s2zch-ye42_l.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/00ebnw8devfa0.js","/creators-assets/_next/static/immutable/chunks/43086d68m86ee.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/3kdp38xspo624.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/1sugay03d_r-_.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/0mq1i7guy9x38.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/16kvwplszpb49.js","/creators-assets/_next/static/immutable/chunks/0mh5jvwc33gcz.js","/creators-assets/_next/static/immutable/chunks/32_fdxpqhpsw-.js","/creators-assets/_next/static/immutable/chunks/3um5ae_udgvki.js","/creators-assets/_next/static/immutable/chunks/09nuoamhdspq1.js","/creators-assets/_next/static/immutable/chunks/2t30dt_pkt6vy.js","/creators-assets/_next/static/immutable/chunks/2m-zjjbxmagmn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/3uclgk1u5qk0z.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/0lx7q3wrd-vbb.js","/creators-assets/_next/static/immutable/chunks/31uxrh745m-yq.js"],"S"] 66:T4dd,

Build note: a world map with no tile server.

Most map components load tiles from Google, OpenStreetMap or Carto, so every visit sends a request to a third party and many need an API key. For our last two components I tried the opposite and baked the world into the code: Natural Earth coastlines (public domain), projected to Equal Earth and simplified into a single 25 KB SVG path. The land dots are an SVG pattern whose spacing is recalculated on zoom, so they keep the same size on screen.

Three things that took more than one try:

Scrolling. A plain wheel now scrolls the page and only Ctrl or ⌘ zooms the map. On phones one finger scrolls the page and two fingers move the map. We measured both on the published site.

The first view. Measuring the frame in JavaScript to fit all pins would make the server and browser draw different frames, so the fit is done with CSS container units. On a 390 px phone the first version cut off Japan and Australia; this fixed it.

Text sizes. The panel started with eleven unrelated font sizes. It now uses one scale (14 px base, ratio 1.125) tied to a single Text Size control.

The two are Aisol Office Map and Aisol Dot Globe; the clip is recorded from them.

67:T84b,

Aisol Office Map shows your offices, studios or stores on a dotted or solid world map drawn inside the component, next to a list with search and region filters.

Choosing a place in the list or on the map moves the map to it and opens a card with its photo, address, hours and a link or directions button; nearby pins merge into a count until you zoom in.

The map loads no tiles and needs no API key, and on narrow frames the list becomes a bottom sheet under the map.

Search ignores accents and case ("sao" finds São Paulo); region filters come from your locations.
A plain wheel scrolls the page and Ctrl or ⌘ plus wheel zooms; on touch, one finger scrolls the page and two fingers move the map.
Arrow keys move through the list, Enter opens a card, Esc closes it; on the map arrows pan and + and − zoom. Selections are announced to screen readers.
The first view fits all your locations, the canvas shows the first card open, and reduced motion turns the fly into a jump.

What you control

Locations (up to 60): name, city, country, region, latitude, longitude, address, hours, button label, link, photo
Map: dots or solid, land and water colours, dot grid and size
Pins: colour, size, pulse, labels
Panel: title, search, region filters
Card: photo, directions button, new tab
Interaction: open first card, drag, zoom buttons, fly time
Theme: font, text size, colours, corner radius, accessible label

For a 3D hero globe, see the free sibling Aisol Dot Globe.

Limits: the map goes down to city level with no streets, place names or satellite imagery, and Antarctica is not shown; locations are typed in as latitude and longitude (no CMS binding or address lookup); browsers older than Safari 16 or Chrome 105 won't size the map correctly.

68:T834,

Aisol Dot Globe draws the world as a dotted 3D globe in three.js, with your cities as pins and labels that hide when they turn to the far side.

Visitors can drag the globe to spin it and it keeps turning briefly after release; at rest it rotates slowly, and animated arcs can connect your cities in a chain or from one hub.

The land shape is stored inside the component, so it loads no map tiles or other files and needs no API key; the Framer canvas and browsers without WebGL show a flat drawing of the same globe.

Coastlines come from Natural Earth map data (public domain), sampled into dots you can make denser, larger or recoloured.
Once it has focus, arrow keys turn and tilt the globe and Home resets it; a vertical swipe on touch screens still scrolls the page.
Drawing stops when the globe is off screen or has nothing to animate; reduced motion turns off auto-rotate, arcs and pulses but keeps dragging.
Label outlines switch between dark and light so labels stay legible on either background.

What you control

Pins: label, latitude and longitude for each city
Markers: colour, size, pulse, labels and label colour
Globe: size, dot colour, dot size, density, ocean colour and opacity, glow colour and strength
Arcs: Off, Chain or Hub, colour and speed
Motion: auto-rotate and its speed, drag, starting longitude and tilt
Background: transparent or a colour, and an accessible label

For a searchable locations list on a flat map, see the paid sibling Aisol Office Map.

Limits: pins are placed by latitude and longitude (no address lookup or CMS binding), very small islands can drop out at this map resolution, labels use the system sans-serif rather than your site font, and without WebGL2 the flat drawing is shown and cannot be dragged.

69:T7a7,

Lanyard Badge hangs a name badge from a lanyard at the top of the frame, rendered in three.js: visitors can grab it, swing it and throw it, and flicking an edge flips it to the back.

Fill in a name, role, organisation, event and tag with an optional photo, or use your own front and back images, then pick a portrait, landscape or square card in Gloss, Matte or Holographic.

The strap takes your colour, width, length and printed text; the badge drops in when it first scrolls into view, sways gently at rest, can open a link, and shows a flat badge on the Framer canvas and where WebGL is unavailable.

Custom physics: a linked rope and a card that twists, then springs back to face you.
Only a press that starts on the badge grabs it, so scrolling the page elsewhere, including on touch screens, keeps working.
Arrow keys push and flip the badge once it has focus; with a link set, a click (not a drag) or Enter opens it.
Text on the accent colour turns white or black for contrast; reduced motion turns off drop-in and sway but keeps dragging.

What you control

Template (name, role, organisation, event, tag, photo) or Images (front, back)
Card shape (Portrait, Landscape, Square), finish (Gloss, Matte, Holographic), card, accent and text colours
Strap style (Loop, Single), colour, printed text and its colour, width (40–200 %), length (10–60 %), card size (20–70 %)
Drag, breeze, drop-in, link with new tab, transparent or background colour, accessible label

Limits: images must allow cross-origin loading to appear on the 3D card (images uploaded to Framer do), card text uses the system sans-serif rather than your site font, the strap print reads mirrored when you see the strap from behind, and with drop-in on the frame is empty until the script has loaded.

6a:T7c1,

Logo Extrude 3D turns an SVG logo into a bevelled 3D object: upload an SVG file or paste its code, and its filled shapes, holes included, are extruded, centred and fitted to the frame.

Pick Chrome, Glass, Clay, Gold or Holographic, or set your own colour, roughness and metalness; reflections come from a studio environment built in code, so no image files are downloaded.

It turns slowly around Y or X or with a gentle wobble, can be dragged with inertia or turned by page scroll, draws nothing while still or off screen, and shows a flat version of your logo on the Framer canvas and where WebGL is unavailable.

Depth and bevel scale with the logo's larger side, so they look the same at any SVG size; bevel steps round the edge.
Reads paths (every command, arcs included), rects, circles, ellipses, polygons and polylines, with group transforms, both fill rules and classes that hide shapes.
Dragging turns the logo; it spins on briefly after release and the tilt springs back.
Under reduced motion, auto-rotate and scroll turning are off and the logo rests at a slight angle; dragging still works.

What you control

SVG file or SVG code; depth (1–80 %), bevel (0–8 %), bevel steps (1–10)
Material preset or Custom; colour for Glass, Clay and Custom; roughness and metalness for Custom; light (0–3)
Auto rotate with speed (0–180 °/s) and axis (Y, X, Wobble); drag; scroll turn with scroll angle (10–720 °)
Transparent or background colour, padding (0–200 px), scale (10–400 %), accessible label

Limits: only filled shapes are extruded (strokes, text, gradients and images are ignored), shapes painted over others, such as white knock-outs, become solid, the whole logo uses one material, and an SVG file must be served with cross-origin access (files uploaded to Framer are).

6b:T798,

Paper Flipbook turns your images into a book you page through: each page bends as it turns, with shading along the fold, a soft spine shadow and a shadow cast on the page underneath.

Turn pages by dragging a page, clicking or tapping either half, using the arrow buttons, or with the keyboard once the book has focus; add one image per page, cover first, or leave the list empty to show twelve built-in demo pages.

It draws frames only while a page is moving and stops when scrolled off screen; the Framer canvas and browsers without WebGL show the same spread as a static layout, reduced motion changes pages instantly, and a polite live region announces the pages in view.

A dragged page stays under your pointer and, on release, completes the turn or falls back depending on how far and how fast you moved it; with a mouse, hovering near the outer edge lifts the page slightly.
Keyboard: Left/Right arrows and Page Up/Page Down turn pages, Home goes to the cover and End to the last page.
Hard cover keeps the front cover rigid (and the back cover when the page count is even); a closed cover sits centred.
Optional autoplay turns a page every few seconds, reverses at either end, and pauses on hover, on focus and while off screen.

What you control

Pages (one image each, up to 200, cover first), page ratio (3:4, 2:3, 4:5, A4, 1:1, 4:3, 3:2), start page, hard cover
Curl, paper thickness and shadow strength (0–1 each)
Background and accent colours
Autoplay and interval (1–30 s), arrow buttons, page number counter, drag to turn, accessible label

Limits: it always shows a two-page spread (no single-page mode at narrow widths), pages are images only, and image hosts must allow cross-origin loading for the 3D pages (images uploaded to Framer do).

6c:T534,

Phone Flow walks through your app screens inside a phone frame: on each screen a tap ring pulses at the point you set, then the next screen slides, fades or pushes in.

Each screen is a component instance from your project with its own tap position and hold time, and screens without one show a built-in grey wireframe layout.

Autoplay starts once it is in view and pauses on hover, off screen or with the pause button, and the Framer canvas and reduced motion start on the last screen with no animation.

Slide, fade or push transitions, looping in both directions or stopping at the last screen.
Previous, pause and next buttons, progress dots, and arrow keys and Space when the frame has focus.
Frame colour, frame thickness, screen radius, tap colour and tap size are all adjustable.

What you control

Screens (component instance, label, tap X %, tap Y %, hold time 200–6000 ms)
Transition (slide, fade, push), autoplay, loop
Progress dots and previous, next and pause buttons on or off
Tap colour and size (10–80 px), frame colour, frame thickness (2–36 px), screen radius (4–48 px)

Limits: the taps are an animation, not real input into your screens.

6d:T623,

Agent Chat plays a scripted conversation: each user message is typed into the input bar and sent, then the assistant pauses, can show a tool step, and replies word by word.

You write the messages and set typing speed, pause, colours, font, radius and height; it starts when it scrolls into view or on page load, and loops by default.

The Framer canvas and reduced motion show the whole conversation at once with no timers, screen readers can read the finished messages, and the final reply is announced through a polite live region.

Messages are a list of user and assistant turns; while the assistant thinks, three dots bounce, and a turn with a Tool label shows a spinner chip that turns into a check.
User text types in character by character with a blinking caret; assistant replies appear one word at a time.
The transcript scrolls itself to the newest message, and a restart button appears in the header when a non-looping chat ends.

What you control

Messages (role, text, optional tool label), header title and subtitle
Typing speed (4–120 characters per second), pause before each reply (120–4000 ms), loop, start (in view or on load)
Background, surface, user bubble, user text, reply text, accent and border colours
Font, corner radius (0–40 px), height (260–900 px)

Limits: it replays the messages you write; visitors cannot type into it, and it does not connect to any AI service.

6e:T669,

Footer Field is a complete site footer whose giant wordmark rises into place when it is first seen, then each letter is pushed away by the cursor and springs back.

Link columns take one link per line in the properties panel, and they wrap from up to five columns to two and then one by the footer's own width.

Three theme presets or custom colours, a bottom bar with copyright, social links and a back-to-top link, and a still wordmark on the canvas and for reduced motion.

Ink, Paper and Signal theme presets, or Custom colours including the wordmark.
Entry rise with distance and stagger, per-letter springs for the pointer, and a ripple on touch.
Animation runs only while something is moving and stops completely at rest.

What you control

Wordmark text, link columns (title + one link per line), copyright, social links (one per line as Label | url), back-to-top label and target
Wrap widths for two columns and one column (measured on the footer itself on the published site; the canvas preview uses the defaults)
Rise on entry, rise distance, rise stagger, push radius, strength, stiffness, damping, touch ripple
Theme (Ink, Paper, Signal, Custom) and custom background, text, muted, accent, divider and wordmark colours
Wordmark size (fit or fixed), weight, alignment, heading level, font, wordmark font, text size, padding

Limits: the physics reacts to the pointer inside the footer only, and Back to top is a plain link to the target you set.

6f:T528,

Screen Stage shows your product screens inside generic laptop, tablet and phone frames, and keeps every device on the same item as it cycles.

Each screen fits its content to the device's safe area, videos play only while the stage is visible, and only the active item ever plays.

The Framer canvas and reduced motion get a still first item with no timers; keyboard users get real previous, next and item buttons.

- One device or a synced pair: laptop, tablet, phone, laptop + phone, tablet + phone.

- Images, looping videos or a component slot per item, so any layer or component can fill a screen.

- Autoplay with a pause button, pause on hover and focus, and a caption with a link under the stage.

What you control

• Items as an array: title, caption, image or image URL, video URL, alt text, link — or connect a component to each item's screen slot

• Devices (single or synced pair), fit (cover or contain), screen background

• Autoplay on/off, interval, transition (fade or slide), pause on hover, show caption, show controls

• Frame colour, bezel colour, accent, text colour, font, text size, max width

Limits: frames are generic devices by design (no brand shapes or logos). Screen slots pair by index with the items array.

70:T49e,

Agent Status plays an AI agent at work: it thinks, ticks through a checklist of steps, streams its answer word by word, then settles on done.

You set the steps, their timing and the answer in the properties panel; it starts when it scrolls into view and can play once or loop.

The Framer canvas and reduced motion show the finished result, and screen readers get the full answer instead of a stream of fragments.

- Four phases in order: thinking, steps, answer, done — each can be switched off.

- Streams by word or by character at a speed you choose, with a caret that follows the text while it types.

- Three looks: card, bubble and minimal, all driven by your colours and font.

What you control

• Prompt line, steps (label + duration each), answer text, done label

• Phases on/off, thinking time, stream unit (word or character), stream speed

• Start (in view or on load), play once or loop, loop pause

• Style (card, bubble, minimal), accent, text, muted, surface and border colours, font, text size, radius, width

Limits: it simulates an agent for presentation; it does not call any AI service.

71:T52b,

CMS Tag Rail turns a CMS collection or a list of items into a filterable showcase. Visitors press tag chips to narrow the cards and the rest close up: one tag or several at a time, matching any tag or every tag.

One component covers four layouts. Rail is a horizontal snap carousel with arrows and dots. Masonry stacks cards of varied heights in columns. Grid lines up even cards in fixed or automatic columns. Stack lays items down the page as rows with a thumbnail on either side.

The canvas shows the finished state, motion runs only on the live site and is skipped for visitors who prefer reduced motion. Chips are real buttons with pressed states and a live result count.

Four layouts: Rail, Masonry, Grid and Stack from one Layout control
Tag filtering: comma-separated tags, Any or Every matching, single or multi-select, optional All chip and counts
CMS ready: bind a collection to Card slots, or fill items with image, title, caption, tags and link
Responsive: per-view, column and row settings adapt at tablet and phone widths
Styling: ratio, gap, radius, chip radius, hover zoom, font, colours and max width
Accessible: focus rings, aria-pressed chips, labelled regions and a polite status line

72: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.

73: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.

74: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.

75: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.

64:["$","$L65",null,{"value":{"fallback":{"$inf$activity-creator-82d016d2-8113-4080-8f2a-7c3796dceab4-all:/unified/creator/82d016d2-8113-4080-8f2a-7c3796dceab4/activity/":[{"data":[{"id":"01a0e7d5-dfd8-779e-936a-52314083ff22","type":"component.created","target":{"type":"component","id":"jDUglx6nTfkwbR8Es9q4","preview":"Aisol Office Map","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0e7d5-9d3f-7474-a19c-941bbe1f3198.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-28T11:45:48.504Z","latestAt":"2026-09-28T11:45:48.504Z"},{"id":"01a0e7c5-abca-7275-b948-5646142baa76","type":"component.created","target":{"type":"component","id":"jc1u9OiVnVkL0QlNh7Kh","preview":"Aisol Dot Globe","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0e7c5-4a14-765f-bf52-0f25042a5700.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-28T11:28:06.602Z","latestAt":"2026-09-28T11:28:06.602Z"},{"id":"01a0e48d-b57b-77e2-b763-046f95f95846","type":"component.created","target":{"type":"component","id":"tf9fFYjORHONTUGKJuP9","preview":"Lanyard Badge","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0e4ad-e014-754c-ab0e-d69fc9e98146.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-27T20:28:07.419Z","latestAt":"2026-09-27T20:28:07.419Z"},{"id":"01a0e3f4-3aed-77c9-b2b0-f7277de25e14","type":"component.created","target":{"type":"component","id":"qath1iMa4RaxyJ44N9DV","preview":"Logo Extrude 3D","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0e4b2-57e1-7331-8e62-c74574f3a14d.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-27T17:40:29.037Z","latestAt":"2026-09-27T17:40:29.037Z"},{"id":"01a0e3ed-f56e-733b-8b0d-a0395bb1dfef","type":"component.created","target":{"type":"component","id":"P35Da7UzweXpZhKbVZXO","preview":"Paper Flipbook","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0e4b0-6794-75b9-8311-887e6aaba9c6.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-27T17:33:38.030Z","latestAt":"2026-09-27T17:33:38.030Z"},{"id":"01a0dc96-e878-74a6-b31a-d23469ebaf79","type":"component.created","target":{"type":"component","id":"CqPILX4j2Rry9VMWvn0Q","preview":"Phone Flow","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0dc96-8200-73a9-bcdf-502c69addf9f.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-26T07:21:12.568Z","latestAt":"2026-09-26T07:21:12.568Z"},{"id":"01a0dc93-30bc-77cb-9c30-20e27ba80de6","type":"component.created","target":{"type":"component","id":"bhqxfsDuXSWDP14vba3d","preview":"Agent Chat","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0dc91-da1f-71ed-b935-0c086ca39e1e.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-26T07:17:08.924Z","latestAt":"2026-09-26T07:17:08.924Z"},{"id":"01a0da19-33ad-71d8-8805-4781b9948c6e","type":"component.created","target":{"type":"component","id":"V2GLXk8RU5tID2MeOwWR","preview":"Footer Field","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0df91-476a-74fe-a686-18bc7575ee39.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-25T19:44:39.853Z","latestAt":"2026-09-25T19:44:39.853Z"},{"id":"01a0da16-5d64-7248-8e57-33e17d489bc1","type":"component.created","target":{"type":"component","id":"RPSB8Dfaiy3oYIYoXRsc","preview":"Screen Stage","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0da16-1aac-77be-aa24-c0d2e5c90023.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-25T19:41:33.924Z","latestAt":"2026-09-25T19:41:33.924Z"},{"id":"01a0da0a-c748-73df-acb8-fc2abcbd107c","type":"component.created","target":{"type":"component","id":"5svB7ri3vKTgjeSoMpMF","preview":"Agent Status","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/82d016d2-8113-4080-8f2a-7c3796dceab4/01a0da0a-6f9c-773e-9858-6a757d153dda.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-25T19:28:54.600Z","latestAt":"2026-09-25T19:28:54.600Z"},{"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":"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"}],"pagination":{"next":"MjAyNi0wOS0wNFQxNTowMzo0Mi4yMjhafDAxYTA2Y2YyLTZkOTQtNzVkNC04NTZkLWFhNjdkOGMzNzBlZQ","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":"01a0e8a8-2bf8-74d8-a324-9d400bed21c9","title":null,"body":"$66","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Build note: a world map with no tile server."}]},{"type":"paragraph","content":[{"type":"text","text":"Most map components load tiles from Google, OpenStreetMap or Carto, so every visit sends a request to a third party and many need an API key. For our last two components I tried the opposite and baked the world into the code: Natural Earth coastlines (public domain), projected to Equal Earth and simplified into a single 25 KB SVG path. The land dots are an SVG pattern whose spacing is recalculated on zoom, so they keep the same size on screen."}]},{"type":"paragraph","content":[{"type":"text","text":"Three things that took more than one try:"}]},{"type":"paragraph","content":[{"type":"text","text":"Scrolling. A plain wheel now scrolls the page and only Ctrl or ⌘ zooms the map. On phones one finger scrolls the page and two fingers move the map. We measured both on the published site."}]},{"type":"paragraph","content":[{"type":"text","text":"The first view. Measuring the frame in JavaScript to fit all pins would make the server and browser draw different frames, so the fit is done with CSS container units. On a 390 px phone the first version cut off Japan and Australia; this fixed it."}]},{"type":"paragraph","content":[{"type":"text","text":"Text sizes. The panel started with eleven unrelated font sizes. It now uses one scale (14 px base, ratio 1.125) tied to a single Text Size control."}]},{"type":"paragraph","content":[{"type":"text","text":"The two are Aisol Office Map and Aisol Dot Globe; the clip is recorded from them."}]}]},"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":"video","url":"https://stream.mux.com/sPT1MnndFsMdLSPYWXgEYnsCJXA5JMf8M8nz02FiPqDg.m3u8","metadata":{"posterUrl":"https://image.mux.com/sPT1MnndFsMdLSPYWXgEYnsCJXA5JMf8M8nz02FiPqDg/thumbnail.webp?time=23","aspectRatio":"16:9","duration":33.066667}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"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-28T15:35:30.556Z","updatedAt":"2026-09-28T15:35:30.556Z"},{"id":"01a0e7d5-dd9a-731d-b206-3ca2ef4faa43","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":"jDUglx6nTfkwbR8Es9q4","resolved":true,"title":"Aisol Office Map","body":"$67","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Office Map shows your offices, studios or stores on a dotted or solid world map drawn inside the component, next to a list with search and region filters."}]},{"type":"paragraph","content":[{"type":"text","text":"Choosing a place in the list or on the map moves the map to it and opens a card with its photo, address, hours and a link or directions button; nearby pins merge into a count until you zoom in."}]},{"type":"paragraph","content":[{"type":"text","text":"The map loads no tiles and needs no API key, and on narrow frames the list becomes a bottom sheet under the map."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Search ignores accents and case (\"sao\" finds São Paulo); region filters come from your locations."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A plain wheel scrolls the page and Ctrl or ⌘ plus wheel zooms; on touch, one finger scrolls the page and two fingers move the map."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Arrow keys move through the list, Enter opens a card, Esc closes it; on the map arrows pan and + and − zoom. Selections are announced to screen readers."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The first view fits all your locations, the canvas shows the first card open, and reduced motion turns the fly into a jump."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"What you control","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Locations (up to 60): name, city, country, region, latitude, longitude, address, hours, button label, link, photo"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Map: dots or solid, land and water colours, dot grid and size"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pins: colour, size, pulse, labels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Panel: title, search, region filters"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Card: photo, directions button, new tab"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interaction: open first card, drag, zoom buttons, fly time"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Theme: font, text size, colours, corner radius, accessible label"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"For a 3D hero globe, see the free sibling "},{"type":"text","text":"Aisol Dot Globe","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.framer.com/marketplace/components/aisol-dot-globe/","target":"_blank"}}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: the map goes down to city level with no streets, place names or satellite imagery, and Antarctica is not shown; locations are typed in as latitude and longitude (no CMS binding or address lookup); browsers older than Safari 16 or Chrome 105 won't size the map correctly."}]}]},"introduction":"Office locator map with no API key","slug":"aisol-office-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/01a0e7d5-9d3f-7474-a19c-941bbe1f3198.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-28T11:45:47.348Z","updatedAt":"2026-09-28T15:28:50.361Z","publishedAt":"2026-09-28T11:45:47.337Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/office-map","price":"15","paymentUrl":"https://payhip.com/b/i1KCm","workshop":false,"categories":[{"id":"8ee0cfdd-bc84-44cf-aa9c-54c86b5c56e0","name":"Maps","slug":"maps"}],"lastSaveId":"1IxBmcuziddB5OeFQgH3","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-28T11:45:47.930Z","updatedAt":"2026-09-28T11:45:47.930Z"},{"id":"01a0e7c5-a98d-74f8-8a6a-1c5f64049e1b","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":"jc1u9OiVnVkL0QlNh7Kh","resolved":true,"title":"Aisol Dot Globe","body":"$68","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Aisol Dot Globe draws the world as a dotted 3D globe in three.js, with your cities as pins and labels that hide when they turn to the far side."}]},{"type":"paragraph","content":[{"type":"text","text":"Visitors can drag the globe to spin it and it keeps turning briefly after release; at rest it rotates slowly, and animated arcs can connect your cities in a chain or from one hub."}]},{"type":"paragraph","content":[{"type":"text","text":"The land shape is stored inside the component, so it loads no map tiles or other files and needs no API key; the Framer canvas and browsers without WebGL show a flat drawing of the same globe."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Coastlines come from Natural Earth map data (public domain), sampled into dots you can make denser, larger or recoloured."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Once it has focus, arrow keys turn and tilt the globe and Home resets it; a vertical swipe on touch screens still scrolls the page."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drawing stops when the globe is off screen or has nothing to animate; reduced motion turns off auto-rotate, arcs and pulses but keeps dragging."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Label outlines switch between dark and light so labels stay legible on either background."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"What you control","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pins: label, latitude and longitude for each city"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Markers: colour, size, pulse, labels and label colour"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Globe: size, dot colour, dot size, density, ocean colour and opacity, glow colour and strength"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Arcs: Off, Chain or Hub, colour and speed"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Motion: auto-rotate and its speed, drag, starting longitude and tilt"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background: transparent or a colour, and an accessible label"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"For a searchable locations list on a flat map, see the paid sibling "},{"type":"text","text":"Aisol Office Map","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.framer.com/marketplace/components/aisol-office-map/","target":"_blank"}}]},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: pins are placed by latitude and longitude (no address lookup or CMS binding), very small islands can drop out at this map resolution, labels use the system sans-serif rather than your site font, and without WebGL2 the flat drawing is shown and cannot be dragged."}]}]},"introduction":"Dotted 3D globe with pins and arcs","slug":"aisol-dot-globe","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/01a0e7c5-4a14-765f-bf52-0f25042a5700.png","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-28T11:28:05.457Z","updatedAt":"2026-09-28T15:27:46.394Z","publishedAt":"2026-09-28T11:28:05.455Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/AisolDotGlobe-H7p0ip.js@wBW3SS2w70bMrirlfjgb","previewUrl":"https://thistle-timing-694660.framer.app/dot-globe","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8ee0cfdd-bc84-44cf-aa9c-54c86b5c56e0","name":"Maps","slug":"maps"}],"lastSaveId":"wBW3SS2w70bMrirlfjgb","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-28T11:28:06.029Z","updatedAt":"2026-09-28T11:28:06.029Z"},{"id":"01a0e48d-b33f-759d-aa53-f104efb57c43","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":"tf9fFYjORHONTUGKJuP9","resolved":true,"title":"Lanyard Badge","body":"$69","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Lanyard Badge hangs a name badge from a lanyard at the top of the frame, rendered in three.js: visitors can grab it, swing it and throw it, and flicking an edge flips it to the back."}]},{"type":"paragraph","content":[{"type":"text","text":"Fill in a name, role, organisation, event and tag with an optional photo, or use your own front and back images, then pick a portrait, landscape or square card in Gloss, Matte or Holographic."}]},{"type":"paragraph","content":[{"type":"text","text":"The strap takes your colour, width, length and printed text; the badge drops in when it first scrolls into view, sways gently at rest, can open a link, and shows a flat badge on the Framer canvas and where WebGL is unavailable."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom physics: a linked rope and a card that twists, then springs back to face you."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Only a press that starts on the badge grabs it, so scrolling the page elsewhere, including on touch screens, keeps working."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Arrow keys push and flip the badge once it has focus; with a link set, a click (not a drag) or Enter opens it."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text on the accent colour turns white or black for contrast; reduced motion turns off drop-in and sway but keeps dragging."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"What you control","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Template (name, role, organisation, event, tag, photo) or Images (front, back)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Card shape (Portrait, Landscape, Square), finish (Gloss, Matte, Holographic), card, accent and text colours"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Strap style (Loop, Single), colour, printed text and its colour, width (40–200 %), length (10–60 %), card size (20–70 %)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag, breeze, drop-in, link with new tab, transparent or background colour, accessible label"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: images must allow cross-origin loading to appear on the 3D card (images uploaded to Framer do), card text uses the system sans-serif rather than your site font, the strap print reads mirrored when you see the strap from behind, and with drop-in on the frame is empty until the script has loaded."}]}]},"introduction":"Grab-and-throw name badge in 3D","slug":"lanyard-badge","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/01a0e4ad-e014-754c-ab0e-d69fc9e98146.png","metadata":{"tint":{"h":60,"s":53,"l":39},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-27T20:28:06.198Z","updatedAt":"2026-09-27T21:03:53.418Z","publishedAt":"2026-09-27T20:28:06.195Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/lanyard-badge","price":"12","paymentUrl":"https://payhip.com/b/uJmdc","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"JVc0YJuZDivSwHN5162Q","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-27T20:28:06.847Z","updatedAt":"2026-09-27T20:28:06.847Z"},{"id":"01a0e46d-1b57-71e3-ad2a-d401061c60bc","title":null,"body":"

Two three.js components, recorded frame by frame from the real thing.

Paper Flipbook: drop in page images, drag the corner or use the arrow keys. One thing I learned shipping it: on my published site, React's onKeyDown never fired inside the code component, even though it worked on the canvas. It now listens on its own root element. If your component's keyboard works in the editor but not live, that's worth checking.

Logo Extrude 3D: paste an SVG and it rebuilds as you type. The clip runs a bolt through chrome, glass, clay, gold and holographic, then pushes the depth.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Two three.js components, recorded frame by frame from the real thing."}]},{"type":"paragraph","content":[{"type":"text","text":"Paper Flipbook: drop in page images, drag the corner or use the arrow keys. One thing I learned shipping it: on my published site, React's onKeyDown never fired inside the code component, even though it worked on the canvas. It now listens on its own root element. If your component's keyboard works in the editor but not live, that's worth checking."}]},{"type":"paragraph","content":[{"type":"text","text":"Logo Extrude 3D: paste an SVG and it rebuilds as you type. The clip runs a bolt through chrome, glass, clay, gold and holographic, then pushes the depth."}]}]},"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":"video","url":"https://stream.mux.com/cclJiUz02tqjHSmHRyiApE4tgxMzlnXrYb02TjYAoXdFw.m3u8","metadata":{"posterUrl":"https://image.mux.com/cclJiUz02tqjHSmHRyiApE4tgxMzlnXrYb02TjYAoXdFw/thumbnail.webp?time=31.833","aspectRatio":"16:9","duration":34.166667}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-27T19:52:30.810Z","updatedAt":"2026-09-27T19:52:30.810Z"},{"id":"01a0e3f4-3894-7636-b016-e1db7ad8147e","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":"qath1iMa4RaxyJ44N9DV","resolved":true,"title":"Logo Extrude 3D","body":"$6a","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Logo Extrude 3D turns an SVG logo into a bevelled 3D object: upload an SVG file or paste its code, and its filled shapes, holes included, are extruded, centred and fitted to the frame."}]},{"type":"paragraph","content":[{"type":"text","text":"Pick Chrome, Glass, Clay, Gold or Holographic, or set your own colour, roughness and metalness; reflections come from a studio environment built in code, so no image files are downloaded."}]},{"type":"paragraph","content":[{"type":"text","text":"It turns slowly around Y or X or with a gentle wobble, can be dragged with inertia or turned by page scroll, draws nothing while still or off screen, and shows a flat version of your logo on the Framer canvas and where WebGL is unavailable."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Depth and bevel scale with the logo's larger side, so they look the same at any SVG size; bevel steps round the edge."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reads paths (every command, arcs included), rects, circles, ellipses, polygons and polylines, with group transforms, both fill rules and classes that hide shapes."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dragging turns the logo; it spins on briefly after release and the tilt springs back."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Under reduced motion, auto-rotate and scroll turning are off and the logo rests at a slight angle; dragging still works."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"What you control","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"SVG file or SVG code; depth (1–80 %), bevel (0–8 %), bevel steps (1–10)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Material preset or Custom; colour for Glass, Clay and Custom; roughness and metalness for Custom; light (0–3)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Auto rotate with speed (0–180 °/s) and axis (Y, X, Wobble); drag; scroll turn with scroll angle (10–720 °)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Transparent or background colour, padding (0–200 px), scale (10–400 %), accessible label"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: only filled shapes are extruded (strokes, text, gradients and images are ignored), shapes painted over others, such as white knock-outs, become solid, the whole logo uses one material, and an SVG file must be served with cross-origin access (files uploaded to Framer are)."}]}]},"introduction":"Your SVG logo, extruded in 3D","slug":"logo-extrude-3d","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/01a0e4b2-57e1-7331-8e62-c74574f3a14d.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-27T17:40:27.771Z","updatedAt":"2026-09-27T21:08:31.067Z","publishedAt":"2026-09-27T17:40:27.767Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/logo-extrude-3d","price":"12","paymentUrl":"https://payhip.com/b/80N6f","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"pF1iMgCEWNX7M2BKyAbK","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-27T17:40:28.436Z","updatedAt":"2026-09-27T17:40:28.436Z"},{"id":"01a0e3ed-f32b-76de-8248-77a623024e98","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":"P35Da7UzweXpZhKbVZXO","resolved":true,"title":"Paper Flipbook","body":"$6b","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Paper Flipbook turns your images into a book you page through: each page bends as it turns, with shading along the fold, a soft spine shadow and a shadow cast on the page underneath."}]},{"type":"paragraph","content":[{"type":"text","text":"Turn pages by dragging a page, clicking or tapping either half, using the arrow buttons, or with the keyboard once the book has focus; add one image per page, cover first, or leave the list empty to show twelve built-in demo pages."}]},{"type":"paragraph","content":[{"type":"text","text":"It draws frames only while a page is moving and stops when scrolled off screen; the Framer canvas and browsers without WebGL show the same spread as a static layout, reduced motion changes pages instantly, and a polite live region announces the pages in view."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A dragged page stays under your pointer and, on release, completes the turn or falls back depending on how far and how fast you moved it; with a mouse, hovering near the outer edge lifts the page slightly."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard: Left/Right arrows and Page Up/Page Down turn pages, Home goes to the cover and End to the last page."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hard cover keeps the front cover rigid (and the back cover when the page count is even); a closed cover sits centred."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional autoplay turns a page every few seconds, reverses at either end, and pauses on hover, on focus and while off screen."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"What you control","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pages (one image each, up to 200, cover first), page ratio (3:4, 2:3, 4:5, A4, 1:1, 4:3, 3:2), start page, hard cover"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Curl, paper thickness and shadow strength (0–1 each)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background and accent colours"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay and interval (1–30 s), arrow buttons, page number counter, drag to turn, accessible label"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: it always shows a two-page spread (no single-page mode at narrow widths), pages are images only, and image hosts must allow cross-origin loading for the 3D pages (images uploaded to Framer do)."}]}]},"introduction":"Page-turning book with real curl","slug":"paper-flipbook","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/01a0e4b0-6794-75b9-8311-887e6aaba9c6.png","metadata":{"tint":{"h":60,"s":26,"l":47},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-27T17:33:36.801Z","updatedAt":"2026-09-27T21:06:26.284Z","publishedAt":"2026-09-27T17:33:36.798Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/paper-flipbook","price":"14","paymentUrl":"https://payhip.com/b/cQIOq","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"6cXhH3LEr51EsxVwi6m5","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-27T17:33:37.451Z","updatedAt":"2026-09-27T17:33:37.451Z"},{"id":"01a0dc96-e61d-726e-874e-d60e2e763fd7","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":"CqPILX4j2Rry9VMWvn0Q","resolved":true,"title":"Phone Flow","body":"$6c","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Phone Flow walks through your app screens inside a phone frame: on each screen a tap ring pulses at the point you set, then the next screen slides, fades or pushes in."}]},{"type":"paragraph","content":[{"type":"text","text":"Each screen is a component instance from your project with its own tap position and hold time, and screens without one show a built-in grey wireframe layout."}]},{"type":"paragraph","content":[{"type":"text","text":"Autoplay starts once it is in view and pauses on hover, off screen or with the pause button, and the Framer canvas and reduced motion start on the last screen with no animation."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Slide, fade or push transitions, looping in both directions or stopping at the last screen."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Previous, pause and next buttons, progress dots, and arrow keys and Space when the frame has focus."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Frame colour, frame thickness, screen radius, tap colour and tap size are all adjustable."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"What you control","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Screens (component instance, label, tap X %, tap Y %, hold time 200–6000 ms)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Transition (slide, fade, push), autoplay, loop"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Progress dots and previous, next and pause buttons on or off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tap colour and size (10–80 px), frame colour, frame thickness (2–36 px), screen radius (4–48 px)"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: the taps are an animation, not real input into your screens."}]}]},"introduction":"App tap-through in a phone frame","slug":"phone-flow","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/01a0dc96-8200-73a9-bcdf-502c69addf9f.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-26T07:21:11.338Z","updatedAt":"2026-09-26T07:30:54.009Z","publishedAt":"2026-09-26T07:21:11.335Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/phone-flow","price":"14","paymentUrl":"https://payhip.com/b/AMWqj","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"RrH3PzJvOddrp2ke4XuM","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-26T07:21:11.965Z","updatedAt":"2026-09-26T07:21:11.965Z"},{"id":"01a0dc93-2e6a-732c-8614-357c27ab08af","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":"bhqxfsDuXSWDP14vba3d","resolved":true,"title":"Agent Chat","body":"$6d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Agent Chat plays a scripted conversation: each user message is typed into the input bar and sent, then the assistant pauses, can show a tool step, and replies word by word."}]},{"type":"paragraph","content":[{"type":"text","text":"You write the messages and set typing speed, pause, colours, font, radius and height; it starts when it scrolls into view or on page load, and loops by default."}]},{"type":"paragraph","content":[{"type":"text","text":"The Framer canvas and reduced motion show the whole conversation at once with no timers, screen readers can read the finished messages, and the final reply is announced through a polite live region."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Messages are a list of user and assistant turns; while the assistant thinks, three dots bounce, and a turn with a Tool label shows a spinner chip that turns into a check."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"User text types in character by character with a blinking caret; assistant replies appear one word at a time."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The transcript scrolls itself to the newest message, and a restart button appears in the header when a non-looping chat ends."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"What you control","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Messages (role, text, optional tool label), header title and subtitle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typing speed (4–120 characters per second), pause before each reply (120–4000 ms), loop, start (in view or on load)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background, surface, user bubble, user text, reply text, accent and border colours"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Font, corner radius (0–40 px), height (260–900 px)"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: it replays the messages you write; visitors cannot type into it, and it does not connect to any AI service."}]}]},"introduction":"Scripted AI chat that plays itself","slug":"agent-chat","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/01a0dc91-da1f-71ed-b935-0c086ca39e1e.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-26T07:17:07.691Z","updatedAt":"2026-09-26T07:31:47.912Z","publishedAt":"2026-09-26T07:17:07.688Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/agent-chat","price":"14","paymentUrl":"https://payhip.com/b/x6qaC","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"ip8SlBMg1E8JCX3HGXP0","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-26T07:17:08.330Z","updatedAt":"2026-09-26T07:17:08.330Z"},{"id":"01a0da2e-dd80-735b-88fb-81990b18bd8d","title":null,"body":"

Wanted a footer that reacts when you wave the cursor at it. The first pass pushed letters sideways into each other and it just looked broken, so they move up and down now.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Wanted a footer that reacts when you wave the cursor at it. The first pass pushed letters sideways into each other and it just looked broken, so they move up and down now."}]}]},"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/01a0da2e-a4b9-77ef-a37c-fba5105a1e9f.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"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-25T20:08:19.588Z","updatedAt":"2026-09-25T20:08:19.588Z"},{"id":"01a0da2e-52c4-75f0-b216-bc717daf381d","title":null,"body":"

Made a scripted "AI is working" card because faking it with a GIF never matched the page. The fiddly part was keeping the card from growing while the answer streams in.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Made a scripted \"AI is working\" card because faking it with a GIF never matched the page. The fiddly part was keeping the card from growing while the answer streams in."}]}]},"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/01a0da2e-116a-77d5-a6f4-b7c38e669821.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"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-25T20:07:44.072Z","updatedAt":"2026-09-25T20:07:44.072Z"},{"id":"01a0da2d-a5ec-71a9-b31f-9461352b2227","title":null,"body":"

Wanted a device mockup where the laptop and the phone in front of it always show the same screen. The tablet-plus-phone layout fought me longest: the phone kept sitting beside the tablet instead of overlapping it.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Wanted a device mockup where the laptop and the phone in front of it always show the same screen. The tablet-plus-phone layout fought me longest: the phone kept sitting beside the tablet instead of overlapping it."}]}]},"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/01a0da2d-762f-725a-943c-f92f1fc33c39.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"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-25T20:06:59.824Z","updatedAt":"2026-09-25T20:06:59.824Z"},{"id":"01a0da19-2efb-766f-aee0-f2f6450117c6","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":"V2GLXk8RU5tID2MeOwWR","resolved":true,"title":"Footer Field","body":"$6e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Footer Field is a complete site footer whose giant wordmark rises into place when it is first seen, then each letter is pushed away by the cursor and springs back."}]},{"type":"paragraph","content":[{"type":"text","text":"Link columns take one link per line in the properties panel, and they wrap from up to five columns to two and then one by the footer's own width."}]},{"type":"paragraph","content":[{"type":"text","text":"Three theme presets or custom colours, a bottom bar with copyright, social links and a back-to-top link, and a still wordmark on the canvas and for reduced motion."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Ink, Paper and Signal theme presets, or Custom colours including the wordmark."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Entry rise with distance and stagger, per-letter springs for the pointer, and a ripple on touch."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animation runs only while something is moving and stops completely at rest."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"What you control","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Wordmark text, link columns (title + one link per line), copyright, social links (one per line as Label | url), back-to-top label and target"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Wrap widths for two columns and one column (measured on the footer itself on the published site; the canvas preview uses the defaults)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Rise on entry, rise distance, rise stagger, push radius, strength, stiffness, damping, touch ripple"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Theme (Ink, Paper, Signal, Custom) and custom background, text, muted, accent, divider and wordmark colours"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Wordmark size (fit or fixed), weight, alignment, heading level, font, wordmark font, text size, padding"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: the physics reacts to the pointer inside the footer only, and Back to top is a plain link to the target you set."}]}]},"introduction":"Footer with a living wordmark","slug":"footer-field","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/01a0df91-476a-74fe-a686-18bc7575ee39.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-25T19:44:37.999Z","updatedAt":"2026-09-26T21:14:07.972Z","publishedAt":"2026-09-25T19:44:37.996Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/FooterField-A8JEEI.js@g0f2HE2D12mKAKLro6P7","previewUrl":"https://thistle-timing-694660.framer.app/footer-field","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"g0f2HE2D12mKAKLro6P7","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-25T19:44:38.651Z","updatedAt":"2026-09-25T19:44:38.651Z"},{"id":"01a0da16-5b1f-7766-b56c-73089131131c","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":"RPSB8Dfaiy3oYIYoXRsc","resolved":true,"title":"Screen Stage","body":"$6f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Screen Stage shows your product screens inside generic laptop, tablet and phone frames, and keeps every device on the same item as it cycles."}]},{"type":"paragraph","content":[{"type":"text","text":"Each screen fits its content to the device's safe area, videos play only while the stage is visible, and only the active item ever plays."}]},{"type":"paragraph","content":[{"type":"text","text":"The Framer canvas and reduced motion get a still first item with no timers; keyboard users get real previous, next and item buttons."}]},{"type":"paragraph","content":[{"type":"text","text":"- One device or a synced pair: laptop, tablet, phone, laptop + phone, tablet + phone."}]},{"type":"paragraph","content":[{"type":"text","text":"- Images, looping videos or a component slot per item, so any layer or component can fill a screen."}]},{"type":"paragraph","content":[{"type":"text","text":"- Autoplay with a pause button, pause on hover and focus, and a caption with a link under the stage."}]},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Items as an array: title, caption, image or image URL, video URL, alt text, link — or connect a component to each item's screen slot"}]},{"type":"paragraph","content":[{"type":"text","text":"• Devices (single or synced pair), fit (cover or contain), screen background"}]},{"type":"paragraph","content":[{"type":"text","text":"• Autoplay on/off, interval, transition (fade or slide), pause on hover, show caption, show controls"}]},{"type":"paragraph","content":[{"type":"text","text":"• Frame colour, bezel colour, accent, text colour, font, text size, max width"}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: frames are generic devices by design (no brand shapes or logos). Screen slots pair by index with the items array."}]}]},"introduction":"Your screens in synced devices","slug":"screen-stage","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/01a0da16-1aac-77be-aa24-c0d2e5c90023.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-25T19:41:32.686Z","updatedAt":"2026-09-25T19:41:32.686Z","publishedAt":"2026-09-25T19:41:32.683Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/screen-stage","price":"14","paymentUrl":"https://payhip.com/b/Gbtyp","workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"Hc5FATf9hA4uaZntAFZD","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-25T19:41:33.343Z","updatedAt":"2026-09-25T19:41:33.343Z"},{"id":"01a0da0a-c4fd-76bf-8b9e-f7acba95891c","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":"5svB7ri3vKTgjeSoMpMF","resolved":true,"title":"Agent Status","body":"$70","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Agent Status plays an AI agent at work: it thinks, ticks through a checklist of steps, streams its answer word by word, then settles on done."}]},{"type":"paragraph","content":[{"type":"text","text":"You set the steps, their timing and the answer in the properties panel; it starts when it scrolls into view and can play once or loop."}]},{"type":"paragraph","content":[{"type":"text","text":"The Framer canvas and reduced motion show the finished result, and screen readers get the full answer instead of a stream of fragments."}]},{"type":"paragraph","content":[{"type":"text","text":"- Four phases in order: thinking, steps, answer, done — each can be switched off."}]},{"type":"paragraph","content":[{"type":"text","text":"- Streams by word or by character at a speed you choose, with a caret that follows the text while it types."}]},{"type":"paragraph","content":[{"type":"text","text":"- Three looks: card, bubble and minimal, all driven by your colours and font."}]},{"type":"paragraph","content":[{"type":"text","text":"What you control"}]},{"type":"paragraph","content":[{"type":"text","text":"• Prompt line, steps (label + duration each), answer text, done label"}]},{"type":"paragraph","content":[{"type":"text","text":"• Phases on/off, thinking time, stream unit (word or character), stream speed"}]},{"type":"paragraph","content":[{"type":"text","text":"• Start (in view or on load), play once or loop, loop pause"}]},{"type":"paragraph","content":[{"type":"text","text":"• Style (card, bubble, minimal), accent, text, muted, surface and border colours, font, text size, radius, width"}]},{"type":"paragraph","content":[{"type":"text","text":"Limits: it simulates an agent for presentation; it does not call any AI service."}]}]},"introduction":"AI working states, step by step","slug":"agent-status","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/01a0da0a-6f9c-773e-9858-6a757d153dda.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-25T19:28:53.306Z","updatedAt":"2026-09-25T19:28:53.306Z","publishedAt":"2026-09-25T19:28:53.303Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://thistle-timing-694660.framer.app/agent-status","price":"12","paymentUrl":"https://payhip.com/b/h3T57","workshop":false,"categories":[{"id":"b42eea44-0ea9-4372-9981-70c9e68577c1","name":"Loaders","slug":"loaders"}],"lastSaveId":"i0qlwPNYUsqpU3xXGwij","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-25T19:28:54.013Z","updatedAt":"2026-09-25T19:28:54.013Z"},{"id":"01a07d1c-e199-701f-8af8-bd2a88125570","title":null,"body":"

Update: CMS Tag Rail now covers four layouts from one Layout control: Rail, Masonry, Grid and Stack. The separate Masonry, Grid and Stack listings are folded into this one, so existing Rail instances keep working and the other layouts are a setting away.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Update: CMS Tag Rail now covers four layouts from one Layout control: Rail, Masonry, Grid and Stack. The separate Masonry, Grid and Stack listings are folded into this one, so existing Rail instances keep working and the other layouts are a setting away."}]}]},"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":"$71","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"CMS Tag Rail turns a CMS collection or a list of items into a filterable showcase. Visitors press tag chips to narrow the cards and the rest close up: one tag or several at a time, matching any tag or every tag."}]},{"type":"paragraph","content":[{"type":"text","text":"One component covers four layouts. Rail is a horizontal snap carousel with arrows and dots. Masonry stacks cards of varied heights in columns. Grid lines up even cards in fixed or automatic columns. Stack lays items down the page as rows with a thumbnail on either side."}]},{"type":"paragraph","content":[{"type":"text","text":"The canvas shows the finished state, motion runs only on the live site and is skipped for visitors who prefer reduced motion. Chips are real buttons with pressed states and a live result count."}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Four layouts: Rail, Masonry, Grid and Stack from one Layout control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tag filtering: comma-separated tags, Any or Every matching, single or multi-select, optional All chip and counts"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"CMS ready: bind a collection to Card slots, or fill items with image, title, caption, tags and link"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive: per-view, column and row settings adapt at tablet and phone widths"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Styling: ratio, gap, radius, chip radius, hover zoom, font, colours and max width"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessible: focus rings, aria-pressed chips, labelled regions and a polite status line"}]}]}]}]},"introduction":"Filterable CMS gallery, 4 layouts","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-27T14:57:29.883Z","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":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"Lv5BCCZRMzManvtyXTxD","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-09-27T14:57:30.856Z","createdAt":"2026-09-07T18:23:59.897Z","updatedAt":"2026-09-27T14:57:30.856Z"},{"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":"$72","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":2,"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":"$73","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":"$74","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":6,"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":"$75","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":4,"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"}],"pagination":{"next":"MDFhMDc2OTEtN2Y1YS03MTNiLWE0M2MtNTNkNzc2ZWMzNWVl","previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L76"}]