60:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/0zubnn10c3ycs.js","/creators-assets/_next/static/immutable/chunks/22fu5bsavzwwn.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/062po15e5hwpr.js","/creators-assets/_next/static/immutable/chunks/32s-s0h8dunw3.js","/creators-assets/_next/static/immutable/chunks/1v0xj8e0d13kw.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/07sosm3lwkdw8.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/11h2ibt_o5elc.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/1rb_nvxxbbu8w.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1gvonxkx57c1x.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/31-e06d1rs-dv.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/3t_5_0v67w73j.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/1xzntyuuknw6z.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/2m-zjjbxmagmn.js","/creators-assets/_next/static/immutable/chunks/1pih5-tmb9v-o.js","/creators-assets/_next/static/immutable/chunks/2schrvc7zmj3_.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/0qidl8fzyhhwz.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/31uxrh745m-yq.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/18fioq62461za.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js"],"S"] 61:T4da,

A full-bleed image slider. Clicking the left or right half of the frame moves to the previous or next slide.

The transition splits the incoming image into vertical strips that reveal in a staggered wipe, while the image scales in from a configurable zoom level. A thin progress bar at the top fills to match the current position.

Each slide shows a small chapter label and a large title; when the slide changes, the title's characters animate in individually. A counter (e.g. "01 / 03") is shown in the corner.

A custom circular cursor follows the pointer and rotates its two lines to indicate which direction a click will go - left or right. It's hidden below the tablet breakpoint, where the click zones remain but the cursor UI doesn't apply.

Strip count, reveal duration, stagger timing, zoom amount and duration, and accent color are all exposed as property controls, along with toggles for the progress bar, counter, click controls, and a hint pill (with editable text). Autoplay is available but off by default.

Respects prefers-reduced-motion - all transitions and the cursor animation are skipped in favor of instant state changes for users who've asked for less motion.

62:T93d,

Hyperiux Flip Card starts as a stack of overlapping cards. Clicking the stack triggers a GSAP Flip transition that spreads it into a hero image and a vertical rail of thumbnails, using the same DOM nodes throughout - nothing is unmounted or re-rendered. Clicking a rail thumbnail runs the same Flip transition to swap it into the hero position.

Each card can carry its own title, meta line, description, and caption. When a new card is selected, that text fades out and reveals back in line-by-line (via GSAP SplitText). Clicking the empty background or pressing Escape collapses the view back to the stack.

◆ Key Features

GSAP Flip Transitions: Stack-to-gallery and hero-swap animations run on the same DOM nodes via GSAP's Flip plugin, not a remount.
Per-Card Content: Title, meta, description, and caption can be set individually for each card.
Text Reveal on Change: The selected card's text fades out and reveals line-by-line via SplitText when a new card is chosen.
Keyboard Navigation: Arrow keys move between cards while the gallery is open; Escape collapses it back to the stack.
Click-Outside to Close: Clicking the empty background area collapses the gallery back into the stack.
Configurable Stack Look: Per-card stack offset (X/Y) and rotation are exposed as controls.
Flip Duration & Easing: Transition duration and easing curve (5 presets) are controls.
Responsive Layout: Switches to a stacked mobile layout (hero, text, thumbnail grid, no Flip transition) below 700px, and scales down proportionally between 700–900px.
Reduced Motion Fallback: Flip and SplitText animation is skipped when prefers-reduced-motion is set; content appears directly in its final state.
Optional Counter: A 00/05-style counter can be toggled on or off.

◆ When to Use It Built for a small, curated set of images with distinct captions - a portfolio grid, a case-study gallery, a small product lineup - rather than a long list, since the stack view is designed around a handful of cards.

63:T8e7,

Hyperiux Shiny Button is an animated CTA button for Framer built around a rotating gradient border. A conic-gradient arc continuously sweeps around the edge at rest, then widens and brightens on hover while a soft inner glow breathes up from the bottom, all rendered in pure CSS, no images or canvas involved.

An optional masked dot-speckle texture sits beneath the border for extra grain, and every color layer, fill, label, accent, and the softer accent it eases into on hover - is set independently.

◆ Key Features

Rotating Gradient Border - A conic-gradient arc continuously sweeps around the button's border.
Speckled Dot Texture - An optional masked dot pattern adds subtle grain beneath the border.
Inner Shimmer on Hover - A soft glow breathes up from the bottom edge when hovered or focused.
Independent Color Controls - Fill, label, accent, and accent-soft colors are all set separately.
Adjustable Sweep & Ease Speed - Control the border's rotation speed and the hover transition speed independently.
Configurable Arc Width - Set how wide the bright border arc reads at rest.
Custom Corner Radius - Dial it from a full pill down to sharp corners.
Toggleable Speckle & Sheen Layers - Turn either effect on or off, plus adjust speckle opacity.
Reduced Motion Support - Respects prefers-reduced-motion, disabling the animation and easing to a static border.
Canvas & Export Safe - Renders cleanly on the Framer canvas and in static exports without animating.

◆ A Border That Never Sits Still

Shiny Button keeps a button's edge alive even at rest, so it earns attention in hero sections and pricing cards without needing a hover state to prove it's interactive.

Keywords: Shiny Button, Gradient Border Button, Animated Border, Glow Button, CTA Button, Framer Button, Conic Gradient, Shimmer Button, Button Component, Framer CTA

64:T935,

Arrow Fill Button is an animated CTA button for Framer built around a hover-fill interaction. As visitors hover, a circular fill expands from behind the arrow icon to cover the entire label while a matching arrow slides in from the other side, creating a smooth, deliberate reveal instead of a flat color swap.

Built for CTAs, hero buttons, and nav links, every color layer - background, fill, hover-fill, and arrow, is set independently, so it drops into a dark or light brand palette without fighting the defaults.

◆ Key Features

Fill Hover Interaction - A circular fill expands from behind the arrow to cover the full label on hover.
Swapping Arrow Icon - The arrow slides out while a matching one slides in as the fill completes.
Independent Color Controls - Background, fill, hover-fill, and arrow colors are all set separately.
Adjustable Animation Duration - Control exactly how fast the fill and arrow swap play out.
Toggleable Fill Effect - Turn the fill off entirely for a flat, static button.
Touch-Friendly Press State - On mobile, the fill triggers on press-and-hold instead of hover.
Fluid Responsive Sizing - Scales smoothly with viewport width across desktop, tablet, and mobile.
New Tab Support - Open the link in a new tab with a single toggle.
Reduced Motion Support - Respects prefers-reduced-motion for visitors who've asked for less animation.
Canvas & Export Safe - Renders cleanly on the Framer canvas and in static exports without animating.

◆ A CTA Built to Draw the Eye

Arrow Fill Button turns a plain call-to-action into a small moment of visual delight, without needing a single line of custom code. It's built for the button that visitors are meant to actually notice - hero sections, pricing CTAs, and nav "explore" links.

Keywords: Arrow Fill Button, CTA Button, Fill Button, Hover Button, Animated Button, Framer Button, Call to Action, Button Component, Framer CTA, Interactive Button

5f:["$","$L60",null,{"value":{"fallback":{"$inf$activity-creator-85a37bb5-62f3-4a45-b1d3-421af1bc0f38-all:/unified/creator/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/activity/":[{"data":[{"id":"01a0d265-ac5e-71ee-8524-5698b2ef35f2","type":"component.created","target":{"type":"component","id":"b7EmskvAiyv1GPH6uLPC","preview":"Hyperiux Strip Slide","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a0d264-4dac-72c8-b7e0-f646b64d44f8.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"85a37bb5-62f3-4a45-b1d3-421af1bc0f38","name":"Hyperiux Vault","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/oev3vnca","slug":"hyperiux","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-24T07:51:13.758Z","latestAt":"2026-09-24T07:51:13.758Z"},{"id":"01a0d213-6e54-73d8-89e5-b2276f8fe0aa","type":"creator.followed","target":{"type":"creator","id":"c7402719-b2d2-4789-8218-ea705ead84d8","preview":"Armand Luxey","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c7402719-b2d2-4789-8218-ea705ead84d8/ni9j7vi9","slug":"armand-luxey","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"85a37bb5-62f3-4a45-b1d3-421af1bc0f38","name":"Hyperiux Vault","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/oev3vnca","slug":"hyperiux","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-24T06:21:23.877Z","latestAt":"2026-09-24T06:21:23.877Z"},{"id":"01a0cd3f-4f06-72d4-b2f3-42e60fadcc55","type":"component.created","target":{"type":"component","id":"h3KsF8JXKwH4iXGYLOdg","preview":"Hyperiux Flip Card","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a0cd3e-f67c-765e-a230-52ffd7da097e.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"85a37bb5-62f3-4a45-b1d3-421af1bc0f38","name":"Hyperiux Vault","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/oev3vnca","slug":"hyperiux","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-23T07:51:13.414Z","latestAt":"2026-09-23T07:51:13.414Z"},{"id":"01a0c8b6-f178-7795-ab2f-028effba117a","type":"component.created","target":{"type":"component","id":"DGENrtsPylFyuVloLxxV","preview":"Shiny Grain Button","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a0c86f-ddde-76eb-ba9e-1153380dc56c.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"85a37bb5-62f3-4a45-b1d3-421af1bc0f38","name":"Hyperiux Vault","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/oev3vnca","slug":"hyperiux","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-22T10:43:47.704Z","latestAt":"2026-09-22T10:43:47.704Z"},{"id":"01a0c7e8-34e5-77c9-99c4-b8788f6a2003","type":"component.created","target":{"type":"component","id":"CQQcL3M7hOUu7mmtnWVl","preview":"Arrow Fill Button","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a0c7e5-2c63-74f8-aa6f-148c7d53056e.jpg","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"85a37bb5-62f3-4a45-b1d3-421af1bc0f38","name":"Hyperiux Vault","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/oev3vnca","slug":"hyperiux","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-22T06:57:59.013Z","latestAt":"2026-09-22T06:57:59.013Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:85a37bb5-62f3-4a45-b1d3-421af1bc0f38:/unified/posts/?creator=85a37bb5-62f3-4a45-b1d3-421af1bc0f38&with=reposts":[{"data":[{"id":"01a0d265-aa33-769d-9da6-e2e2f3df7e42","title":null,"body":"

Hyperiux Strip Slide - a full-bleed image slider where the transition does the talking.

Click either half of the frame to move forward or back. The incoming image reveals through a staggered vertical strip wipe while it zooms in, with a thin progress bar tracking position at the top.

Each slide carries a chapter label and a title whose characters slide into place individually, plus a counter and a custom cursor that rotates to show which way a click will go.

Strip count, reveal speed, stagger timing, zoom amount, and accent color are all property controls, along with toggles for the progress bar, counter, and click controls. Autoplay is available, off by default.

Respects prefers-reduced-motion, and stays static on canvas/export.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hyperiux Strip Slide","marks":[{"type":"bold"}]},{"type":"text","text":" - a full-bleed image slider where the transition does the talking."}]},{"type":"paragraph","content":[{"type":"text","text":"Click either half of the frame to move forward or back. The incoming image reveals through a staggered vertical strip wipe while it zooms in, with a thin progress bar tracking position at the top."}]},{"type":"paragraph","content":[{"type":"text","text":"Each slide carries a chapter label and a title whose characters slide into place individually, plus a counter and a custom cursor that rotates to show which way a click will go."}]},{"type":"paragraph","content":[{"type":"text","text":"Strip count, reveal speed, stagger timing, zoom amount, and accent color are all property controls, along with toggles for the progress bar, counter, and click controls. Autoplay is available, off by default."}]},{"type":"paragraph","content":[{"type":"text","text":"Respects "},{"type":"text","text":"prefers-reduced-motion","marks":[{"type":"code"}]},{"type":"text","text":", and stays static on canvas/export."}]}]},"author":{"framerUserId":"85a37bb5-62f3-4a45-b1d3-421af1bc0f38","name":"Hyperiux Vault","slug":"hyperiux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/oev3vnca","followed":false,"followsYou":false},"media":[],"resources":[{"id":"b7EmskvAiyv1GPH6uLPC","resolved":true,"title":"Hyperiux Strip Slide","body":"$61","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A full-bleed image slider. Clicking the left or right half of the frame moves to the previous or next slide."}]},{"type":"paragraph","content":[{"type":"text","text":"The transition splits the incoming image into vertical strips that reveal in a staggered wipe, while the image scales in from a configurable zoom level. A thin progress bar at the top fills to match the current position."}]},{"type":"paragraph","content":[{"type":"text","text":"Each slide shows a small chapter label and a large title; when the slide changes, the title's characters animate in individually. A counter (e.g. \"01 / 03\") is shown in the corner."}]},{"type":"paragraph","content":[{"type":"text","text":"A custom circular cursor follows the pointer and rotates its two lines to indicate which direction a click will go - left or right. It's hidden below the tablet breakpoint, where the click zones remain but the cursor UI doesn't apply."}]},{"type":"paragraph","content":[{"type":"text","text":"Strip count, reveal duration, stagger timing, zoom amount and duration, and accent color are all exposed as property controls, along with toggles for the progress bar, counter, click controls, and a hint pill (with editable text). Autoplay is available but off by default."}]},{"type":"paragraph","content":[{"type":"text","text":"Respects prefers-reduced-motion - all transitions and the cursor animation are skipped in favor of instant state changes for users who've asked for less motion."}]}]},"introduction":"Strip-wipe slider, custom cursor","slug":"hyperiux-strip-slide","author":{"framerUserId":"85a37bb5-62f3-4a45-b1d3-421af1bc0f38","name":"Hyperiux Vault","slug":"hyperiux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/oev3vnca","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a0d264-4dac-72c8-b7e0-f646b64d44f8.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-24T07:51:12.568Z","updatedAt":"2026-09-24T08:01:23.381Z","publishedAt":"2026-09-24T07:51:12.565Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/HyperiuxStripSlider-POwA4G.js@VBRjMAuUkJ9ZyLt7r1CL","previewUrl":"https://hyperiux-vault.framer.website/hyperiux-strip-slider","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"VBRjMAuUkJ9ZyLt7r1CL","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-24T07:51:13.203Z","updatedAt":"2026-09-24T07:51:13.203Z"},{"id":"01a0cd3f-4cc1-73af-bb7e-4c853d5b1f19","title":null,"body":"

Hyperiux Flip Card - a stack of cards that flips open into a gallery.

Click the stack and it spreads into a hero image with a rail of thumbnails, using GSAP's Flip plugin - same DOM nodes, no remount. Click any thumbnail to swap it into the hero spot, same transition. Each card can carry its own title, meta line, description, and caption, and the text fades out and reveals line-by-line (via SplitText) whenever the selection changes.

Arrow keys move between cards while it's open, Escape or clicking the background collapses it back to the stack. Falls back to a static layout under prefers-reduced-motion, and switches to a stacked mobile layout below 700px.

Free in the Hyperiux Vault.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hyperiux Flip Card - a stack of cards that flips open into a gallery."}]},{"type":"paragraph","content":[{"type":"text","text":"Click the stack and it spreads into a hero image with a rail of thumbnails, using GSAP's Flip plugin - same DOM nodes, no remount. Click any thumbnail to swap it into the hero spot, same transition. Each card can carry its own title, meta line, description, and caption, and the text fades out and reveals line-by-line (via SplitText) whenever the selection changes."}]},{"type":"paragraph","content":[{"type":"text","text":"Arrow keys move between cards while it's open, Escape or clicking the background collapses it back to the stack. Falls back to a static layout under "},{"type":"text","text":"prefers-reduced-motion","marks":[{"type":"code"}]},{"type":"text","text":", and switches to a stacked mobile layout below 700px."}]},{"type":"paragraph","content":[{"type":"text","text":"Free in the Hyperiux Vault."}]}]},"author":{"framerUserId":"85a37bb5-62f3-4a45-b1d3-421af1bc0f38","name":"Hyperiux Vault","slug":"hyperiux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/oev3vnca","followed":false,"followsYou":false},"media":[],"resources":[{"id":"h3KsF8JXKwH4iXGYLOdg","resolved":true,"title":"Hyperiux Flip Card","body":"$62","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hyperiux Flip Card starts as a stack of overlapping cards. Clicking the stack triggers a GSAP Flip transition that spreads it into a hero image and a vertical rail of thumbnails, using the same DOM nodes throughout - nothing is unmounted or re-rendered. Clicking a rail thumbnail runs the same Flip transition to swap it into the hero position."}]},{"type":"paragraph","content":[{"type":"text","text":"Each card can carry its own title, meta line, description, and caption. When a new card is selected, that text fades out and reveals back in line-by-line (via GSAP SplitText). Clicking the empty background or pressing Escape collapses the view back to the stack."}]},{"type":"paragraph","content":[{"type":"text","text":"◆ Key Features"}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"GSAP Flip Transitions","marks":[{"type":"bold"}]},{"type":"text","text":": Stack-to-gallery and hero-swap animations run on the same DOM nodes via GSAP's Flip plugin, not a remount."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Per-Card Content","marks":[{"type":"bold"}]},{"type":"text","text":": Title, meta, description, and caption can be set individually for each card."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text Reveal on Change","marks":[{"type":"bold"}]},{"type":"text","text":": The selected card's text fades out and reveals line-by-line via SplitText when a new card is chosen."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard Navigation","marks":[{"type":"bold"}]},{"type":"text","text":": Arrow keys move between cards while the gallery is open; Escape collapses it back to the stack."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click-Outside to Close","marks":[{"type":"bold"}]},{"type":"text","text":": Clicking the empty background area collapses the gallery back into the stack."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configurable Stack Look","marks":[{"type":"bold"}]},{"type":"text","text":": Per-card stack offset (X/Y) and rotation are exposed as controls."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Flip Duration & Easing","marks":[{"type":"bold"}]},{"type":"text","text":": Transition duration and easing curve (5 presets) are controls."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive Layout","marks":[{"type":"bold"}]},{"type":"text","text":": Switches to a stacked mobile layout (hero, text, thumbnail grid, no Flip transition) below 700px, and scales down proportionally between 700–900px."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced Motion Fallback","marks":[{"type":"bold"}]},{"type":"text","text":": Flip and SplitText animation is skipped when "},{"type":"text","text":"prefers-reduced-motion","marks":[{"type":"code"}]},{"type":"text","text":" is set; content appears directly in its final state."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional Counter","marks":[{"type":"bold"}]},{"type":"text","text":": A 00/05-style counter can be toggled on or off."}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"◆ When to Use It Built for a small, curated set of images with distinct captions - a portfolio grid, a case-study gallery, a small product lineup - rather than a long list, since the stack view is designed around a handful of cards."}]}]},"introduction":"GSAP Flip stack, click any card","slug":"hyperiux-flip-card","author":{"framerUserId":"85a37bb5-62f3-4a45-b1d3-421af1bc0f38","name":"Hyperiux Vault","slug":"hyperiux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/oev3vnca","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a0cd3e-f67c-765e-a230-52ffd7da097e.jpg","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1440,"height":1080}}],"post":null,"createdAt":"2026-09-23T07:51:12.228Z","updatedAt":"2026-09-24T07:11:32.988Z","publishedAt":"2026-09-23T07:51:12.225Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/HyperiuxFlipCard-HlLjYO.js@4B0jCMlPlTgvvt7PNUXH","previewUrl":"https://hyperiux-vault.framer.website/hyperiux-flip-card","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"4B0jCMlPlTgvvt7PNUXH","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-23T07:51:12.833Z","updatedAt":"2026-09-23T07:51:12.833Z"},{"id":"01a0c8b6-eef2-7290-befc-d25da4ac13ef","title":null,"body":"

Free component #2 in the Hyperiux Vault: Shiny Button.

The border is a conic gradient on a slow rotation, with a dot-pattern texture underneath so it reads as brushed metal instead of a screensaver. Hover it and the arc widens, brightens, and a glow breathes up from the bottom edge before settling back down.

Colour, sweep speed, border width, and corner radius are all property controls — no code, no override needed. It's pure CSS under the hood, so it costs you nothing to run.

Free in the Vault, install and go.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Free component #2 in the Hyperiux Vault: Shiny Button."}]},{"type":"paragraph","content":[{"type":"text","text":"The border is a conic gradient on a slow rotation, with a dot-pattern texture underneath so it reads as brushed metal instead of a screensaver. Hover it and the arc widens, brightens, and a glow breathes up from the bottom edge before settling back down."}]},{"type":"paragraph","content":[{"type":"text","text":"Colour, sweep speed, border width, and corner radius are all property controls — no code, no override needed. It's pure CSS under the hood, so it costs you nothing to run."}]},{"type":"paragraph","content":[{"type":"text","text":"Free in the Vault, install and go."}]}]},"author":{"framerUserId":"85a37bb5-62f3-4a45-b1d3-421af1bc0f38","name":"Hyperiux Vault","slug":"hyperiux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/oev3vnca","followed":false,"followsYou":false},"media":[],"resources":[{"id":"DGENrtsPylFyuVloLxxV","resolved":true,"title":"Shiny Grain Button","body":"$63","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hyperiux Shiny Button is an animated CTA button for Framer built around a rotating gradient border. A conic-gradient arc continuously sweeps around the edge at rest, then widens and brightens on hover while a soft inner glow breathes up from the bottom, all rendered in pure CSS, no images or canvas involved."}]},{"type":"paragraph","content":[{"type":"text","text":"An optional masked dot-speckle texture sits beneath the border for extra grain, and every color layer, fill, label, accent, and the softer accent it eases into on hover - is set independently."}]},{"type":"paragraph","content":[{"type":"text","text":"◆ "},{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Rotating Gradient Border","marks":[{"type":"bold"}]},{"type":"text","text":" - A conic-gradient arc continuously sweeps around the button's border."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speckled Dot Texture","marks":[{"type":"bold"}]},{"type":"text","text":" - An optional masked dot pattern adds subtle grain beneath the border."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Inner Shimmer on Hover","marks":[{"type":"bold"}]},{"type":"text","text":" - A soft glow breathes up from the bottom edge when hovered or focused."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Independent Color Controls","marks":[{"type":"bold"}]},{"type":"text","text":" - Fill, label, accent, and accent-soft colors are all set separately."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable Sweep & Ease Speed","marks":[{"type":"bold"}]},{"type":"text","text":" - Control the border's rotation speed and the hover transition speed independently."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Configurable Arc Width","marks":[{"type":"bold"}]},{"type":"text","text":" - Set how wide the bright border arc reads at rest."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom Corner Radius","marks":[{"type":"bold"}]},{"type":"text","text":" - Dial it from a full pill down to sharp corners."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Toggleable Speckle & Sheen Layers","marks":[{"type":"bold"}]},{"type":"text","text":" - Turn either effect on or off, plus adjust speckle opacity."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced Motion Support","marks":[{"type":"bold"}]},{"type":"text","text":" - Respects "},{"type":"text","text":"prefers-reduced-motion","marks":[{"type":"code"}]},{"type":"text","text":", disabling the animation and easing to a static border."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Canvas & Export Safe","marks":[{"type":"bold"}]},{"type":"text","text":" - Renders cleanly on the Framer canvas and in static exports without animating."}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"◆ "},{"type":"text","text":"A Border That Never Sits Still","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Shiny Button keeps a button's edge alive even at rest, so it earns attention in hero sections and pricing cards without needing a hover state to prove it's interactive."}]},{"type":"paragraph","content":[{"type":"text","text":"Keywords: Shiny Button, Gradient Border Button, Animated Border, Glow Button, CTA Button, Framer Button, Conic Gradient, Shimmer Button, Button Component, Framer CTA"}]}]},"introduction":"Button with gradient and shimmer","slug":"shiny-grain-button","author":{"framerUserId":"85a37bb5-62f3-4a45-b1d3-421af1bc0f38","name":"Hyperiux Vault","slug":"hyperiux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/oev3vnca","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a0c86f-ddde-76eb-ba9e-1153380dc56c.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1440,"height":1080}}],"post":null,"createdAt":"2026-09-22T10:43:46.426Z","updatedAt":"2026-09-22T10:43:46.426Z","publishedAt":"2026-09-22T10:43:46.423Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/HyperiuxShinyButton-q1SkGW.js@SRZOZPDDtD9NFtCeaBto","previewUrl":"https://hyperiux-vault.framer.website/shiny-button","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"SRZOZPDDtD9NFtCeaBto","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-22T10:43:47.058Z","updatedAt":"2026-09-22T10:43:47.058Z"},{"id":"01a0c7e8-32a8-7443-8bb9-23de53a555f5","title":null,"body":"

Arrow Fill Button is live - first of a run of Vault buttons headed to the Marketplace. Hover it, the fill sweeps in behind the label, the arrow swaps sides, and every color, the animation speed, and whether the fill even triggers are yours to set. Free.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Arrow Fill Button is live - first of a run of Vault buttons headed to the Marketplace. Hover it, the fill sweeps in behind the label, the arrow swaps sides, and every color, the animation speed, and whether the fill even triggers are yours to set. Free."}]}]},"author":{"framerUserId":"85a37bb5-62f3-4a45-b1d3-421af1bc0f38","name":"Hyperiux Vault","slug":"hyperiux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/oev3vnca","followed":false,"followsYou":false},"media":[],"resources":[{"id":"CQQcL3M7hOUu7mmtnWVl","resolved":true,"title":"Arrow Fill Button","body":"$64","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Arrow Fill Button is an animated CTA button for Framer built around a hover-fill interaction. As visitors hover, a circular fill expands from behind the arrow icon to cover the entire label while a matching arrow slides in from the other side, creating a smooth, deliberate reveal instead of a flat color swap."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for CTAs, hero buttons, and nav links, every color layer - background, fill, hover-fill, and arrow, is set independently, so it drops into a dark or light brand palette without fighting the defaults."}]},{"type":"paragraph","content":[{"type":"text","text":"◆ "},{"type":"text","text":"Key Features","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fill Hover Interaction","marks":[{"type":"bold"}]},{"type":"text","text":" - A circular fill expands from behind the arrow to cover the full label on hover."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Swapping Arrow Icon","marks":[{"type":"bold"}]},{"type":"text","text":" - The arrow slides out while a matching one slides in as the fill completes."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Independent Color Controls","marks":[{"type":"bold"}]},{"type":"text","text":" - Background, fill, hover-fill, and arrow colors are all set separately."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable Animation Duration","marks":[{"type":"bold"}]},{"type":"text","text":" - Control exactly how fast the fill and arrow swap play out."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Toggleable Fill Effect","marks":[{"type":"bold"}]},{"type":"text","text":" - Turn the fill off entirely for a flat, static button."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Touch-Friendly Press State","marks":[{"type":"bold"}]},{"type":"text","text":" - On mobile, the fill triggers on press-and-hold instead of hover."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fluid Responsive Sizing","marks":[{"type":"bold"}]},{"type":"text","text":" - Scales smoothly with viewport width across desktop, tablet, and mobile."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"New Tab Support","marks":[{"type":"bold"}]},{"type":"text","text":" - Open the link in a new tab with a single toggle."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced Motion Support","marks":[{"type":"bold"}]},{"type":"text","text":" - Respects "},{"type":"text","text":"prefers-reduced-motion","marks":[{"type":"code"}]},{"type":"text","text":" for visitors who've asked for less animation."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Canvas & Export Safe","marks":[{"type":"bold"}]},{"type":"text","text":" - Renders cleanly on the Framer canvas and in static exports without animating."}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"◆ "},{"type":"text","text":"A CTA Built to Draw the Eye","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Arrow Fill Button turns a plain call-to-action into a small moment of visual delight, without needing a single line of custom code. It's built for the button that visitors are meant to actually notice - hero sections, pricing CTAs, and nav \"explore\" links."}]},{"type":"paragraph","content":[{"type":"text","text":"Keywords: Arrow Fill Button, CTA Button, Fill Button, Hover Button, Animated Button, Framer Button, Call to Action, Button Component, Framer CTA, Interactive Button"}]}]},"introduction":"A pill button with a sliding fill","slug":"arrow-fill-button","author":{"framerUserId":"85a37bb5-62f3-4a45-b1d3-421af1bc0f38","name":"Hyperiux Vault","slug":"hyperiux","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/oev3vnca","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a0c7e5-2c63-74f8-aa6f-148c7d53056e.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1440,"height":1080}}],"post":null,"createdAt":"2026-09-22T06:57:57.828Z","updatedAt":"2026-09-22T09:12:09.531Z","publishedAt":"2026-09-22T06:57:57.825Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/ArrowFillButton-XA9BdX.js@8FpuUU9JGHf6w7gl8m3c","previewUrl":"https://hyperiux-vault.framer.website/arrow-fill-button","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"8FpuUU9JGHf6w7gl8m3c","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-09-22T09:28:30.492Z","createdAt":"2026-09-22T06:57:58.440Z","updatedAt":"2026-09-22T09:28:30.492Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L65"}]