51:I[267044,["/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/2svd483q03jkh.js","/creators-assets/_next/static/immutable/chunks/168ndrpf5qukf.js","/creators-assets/_next/static/immutable/chunks/3py036r67l2cz.js","/creators-assets/_next/static/immutable/chunks/1ozc4wc1du10z.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/0ak510_hzfaam.js","/creators-assets/_next/static/immutable/chunks/2h_rs7nbfvb7-.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1eyot9c9uwocm.js","/creators-assets/_next/static/immutable/chunks/03stgnoj58q7s.js","/creators-assets/_next/static/immutable/chunks/2mxay2-h-hkwd.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/355jz6twgi-xd.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/16gequ09928lv.js","/creators-assets/_next/static/immutable/chunks/2f6k-nq5t2nve.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/19il-gpo0dws3.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/0h18ahbw9nndq.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/266ocjpppah0s.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3e031hjlg8gyj.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/0lmmb08iwroji.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 52:T496,

Hi everyone! We've just released Kyntra, a one-page landing template for a home-services app.

We built most of the page around the scroll. The hero sits on an animated gradient, the About phones drift apart, a large statement fills in with colour, the feature cards stack on top of each other, and a row of cards slides sideways while the section is pinned. A timeline draws itself down the "How it works" steps, the stats roll up digit by digit, and on desktop the footer is revealed from underneath.

"Get Started" opens an enquiry form, "Download Kyntra App" slides in a panel with a QR code, and the FAQ opens one question at a time. We set it up for Desktop, Tablet and Phone, with a full-screen menu on smaller screens. On touch devices, the blog card details stay visible instead of waiting for a hover.

The animated sections are code components, so you edit their content, colours and timings in the properties panel. Testimonials, stats and articles are fictional demo content, ready to swap.

We'd love to hear what you think, especially about how the scroll interactions feel on Tablet and Phone.

53:T8e5,

Kyntra is a one-page landing template for a home-services app, with scroll-driven sections, an enquiry form, an app download panel, and layouts for Desktop, Tablet and Phone.

Page sections

Hero: headline, store buttons and a phone mockup over an animated gradient background.
About: three phone screens that drift in opposite directions as you scroll (desktop).
Statement: a large sentence that fills in with colour as you scroll.
Features: five cards that stack as you scroll.
Smarter: cards that slide sideways while the section is pinned, with a pointer spotlight on desktop.
How it works: a timeline line that draws down as you scroll.
Trust: stats that roll up digit by digit.
Testimonials: photo, quote and prev/next buttons, plus a draggable thumbnail strip on desktop.
Blogs: a row of article cards with arrows. Details show on hover, and always on touch devices.
FAQ: one question open at a time, with a height animation.
CTA and footer: the CTA turns blue on hover, and the footer is revealed from underneath (desktop).

"Get Started" opens an enquiry form, and "Download Kyntra App" opens a side panel with a QR code. Headings rise in line by line as they come into view.

Built for easy editing

Desktop (1280), Tablet (768) and Phone (390) breakpoints, with a full-screen menu on Tablet and Phone.
Text and colour styles on every native text layer.
Animated sections are code components, with content, colours and timings editable in the properties panel.
Animations respect the reduced-motion setting.
Fonts: Host Grotesk and DM Sans (Google Fonts, Open Font License).
A Read Me page explains the setup.

Good to know

Testimonials, stats and articles are demo content with fictional names.
The enquiry form sends to any form endpoint URL you paste in (for example Formspree). Without one, it opens the visitor's email app.
The QR code and store links are placeholders to replace.

54:T7d6,

Elena Voss is a one-page portfolio template for web and brand designers, with scroll-driven sections, a contact form in a modal, and layouts for Desktop, Tablet and Phone.

Page sections

Hero: a large headline with a portrait that scales down as you scroll.
Portfolio: project cards that stack as you scroll, with a progress line for the active project.
Why work with me: three cards.
Services: cards that slide in sideways while the section is pinned, with a gradient fill on hover.
Awards: on desktop, a floating image follows the hovered row and the dividers bend under the pointer.
Client logos: they fly in from depth as you scroll.
Testimonials: a carousel with prev/next buttons, avatar thumbnails and swipe on touch.
FAQ: items open and close with a height animation.
Footer: contact card, links that underline on hover, and social icons.

Every "Get in Touch" button opens the contact form. The header hides when you scroll down and comes back when you scroll up.

Built for easy editing

Desktop (1280), Tablet (768) and Phone (390) breakpoints.
Text and colour styles on every native text layer.
FAQ built as a native component with Open and Closed variants.
Animated sections are code components, with content, colours and timings editable in the properties panel.
Animations respect the reduced-motion setting.
Font: Host Grotesk (Google Fonts, Open Font License).
A Read Me page explains the setup.

Good to know

Logos, awards and testimonials are demo content with fictional names.
The contact form sends to any form endpoint URL you paste in (for example Formspree). Without one, it opens the visitor's email app.

55:T451,

An image card that flips in 3D to show the next slide, while the headline swaps with a turn-and-slide motion. It flips horizontally or vertically, with arrow buttons, dot navigation and optional autoplay.

Key features:

Horizontal or vertical flip
Arrow buttons and clickable dots
Autoplay with adjustable delay (1–10s); pauses when off-screen or when the tab is hidden
Loop, or stop at the first and last slide
5 easing presets
Adjustable card size, corner radius, text size, text, accent and background colours
Up to 12 slides, each with an image and text
Slides without an image show a gradient or solid placeholder
Reduced motion: slides change without the flip animation

How to use:

Drop it into a frame; it fills the frame.
Add slides (image and text) in Slides.
Choose the flip axis, easing and autoplay.
Set card size and colours.

56:T49f,

Image cards arranged along a wide arc. Drag or flick to spin them; cards further from the one you grab follow with a slight lag. Also works with the trackpad or mouse wheel and the arrow keys.

Key features:

Drag and flick with adjustable momentum
Optional snap to the nearest card
Wheel control: horizontal only, both directions, or off
Arrow keys when focused
Optional slow auto-rotation that pauses on hover
Hover captions (title and description), can be turned off
Adjustable arc radius, arc position, card size, aspect ratio, overlap and corner radius
Up to 20 items; the cards repeat endlessly
Items without an image show a gradient or solid placeholder
Pauses off-screen; reduced motion removes the lag, the fling and the auto-rotation

How to use:

Drop it into a frame; it fills the frame.
Add images, titles and descriptions in Items.
Tune the arc and card size.
Choose wheel behaviour and snap.

57:T554,

An endless strip of images along the bottom of the frame. Cards start small on the left and grow as they move right. Scroll, drag or swipe to move it. Hovering a card shows its number, title and description line by line.

Key features:

Scroll, drag and touch, with coasting after you let go
Endless loop
Hover text reveal and 1.05× image zoom, each can be turned off
Adjustable size and how gradually cards grow
Editable heading and subheading
Screen readers announce the current slide
Up to 20 items; items without an image show a gradient or solid placeholder
Pauses off-screen; reduced motion turns off the coasting and smoothing

Disclosure (include this in the listing): While the pointer is over the slider, the mouse wheel moves the slider and the page won't scroll. Turn off Scroll Wheel if visitors need to scroll past it. On touch screens, swiping over it moves the slider instead of the page.

How to use:

Drop it into a frame; it fills the frame.
Add images, titles and descriptions in Items.
Set Size and Ease Range.
Turn off Scroll Wheel if the page needs to scroll past it.

58:T4c8,

A ring of image cards with four views: Flat, Tilt, Ring and Gallery. Switching views animates every card to its new place. The ring spins slowly and pauses on hover, and hovering a card pops it out with a turn.

Key features:

Four modes switched with on-screen buttons; the buttons can be hidden and the starting mode chosen
Animated transition between modes
Idle spin with adjustable speed and direction; pauses on hover (optional)
Hover pop with adjustable lift and turn angle
Each mode's rotation, radius and scale is adjustable separately
Adjustable card size, gap and corner radius
Up to 40 items; items without an image show a gradient or solid placeholder
Pulls the ring in on frames narrower than 768px
Pauses off-screen; reduced motion stops the spin, transitions and hover pop

How to use:

Drop it into a frame; it fills the frame.
Add images in Items.
Pick a starting mode and card size.
Adjust each mode's settings or hide the mode buttons.

59:T49c,

Cards travel around an ellipse, growing as they reach the right side and shrinking toward the left, with an optional label in the centre. It steps one card at a time on autoplay, and you can drag it around; it snaps to the nearest card when you let go.

Key features:

Autoplay with adjustable hold time, step duration and 5 easing presets
Drag around the ellipse; snaps to the nearest card on release
Pauses on hover (optional)
Each item can be an image, a text tile (title, subtitle, fill and text colour), or a placeholder
Adjustable ellipse width and height, card size, corner radius and far-card scale
Optional centre label with editable text and colour
Up to 30 items
Pauses off-screen; reduced motion turns off autoplay and snaps without animation

How to use:

Drop it into a frame; it fills the frame.
Add images, or titles for text tiles, in Items.
Set the ellipse size and card size.
Adjust autoplay timing or turn it off.

5a:T521,

Images appear under the cursor as it moves across the frame, each one popping in and fading out. When the cursor rests, images keep spawning at a slower pace (optional). On touch devices, tapping spawns an image.

Key features:

Spawns an image each time the cursor travels a set distance (adjustable)
Optional idle spawning while the cursor rests, with its own timing
Smoothed cursor following (adjustable)
Adjustable pop-in and fade-out duration, easing, and start, end and exit scale
Optional random tilt on pop-in and exit
Up to 8 copies of the image set on screen at once
Tap to spawn on touch devices, or turn it off on mobile
Reacts only to the cursor inside its own frame, so several instances on a page don't interfere
Pauses off-screen and when the tab is hidden
Reduced motion and the Framer canvas show a still, diagonal trail of images

How to use:

Drop it into a frame; it fills the frame.
Add your images in Images.
Set Trigger Distance and the pop and fade timing.
Place content behind it; the frame is transparent.

5b:T7e1,

Eight image cards start clustered in a stack. Scroll, and they fan out across the screen - each card gets its own rotation and depth, drifting slightly with cursor position once the spread finishes. A centered headline fades in partway through.

Built on framer-motion's scroll and spring hooks - no GSAP, no canvas. Card radius, stack scale, cluster rotation, background and text color, and the scroll distance the spread plays out over are all exposed as controls. Respects reduced motion: rotation and scale-in flatten, cursor parallax turns off.

Key Features

8 photo cards scatter from a clustered stack as the page scrolls, no scroll-jacking library involved
Each card carries its own rotation, offset, and depth, so the scatter reads as organic rather than uniform
Cursor parallax kicks in once the cards are fully spread, and pauses automatically once you scroll past the section
Centered headline fades in partway through the scatter, timed to scroll progress
Reduced-motion aware: card rotation and the headline's scale-in flatten, cursor parallax turns off entirely
Framer-motion only no GSAP, no canvas, no extra runtime dependency

How to Use

Drop the component onto a page. It sets its own section height from the Scroll Length control (in vh) - the scatter plays out over that scroll distance, so give it room.

Stack Scale and Card Radius shape the clustered starting look; Cluster Rotation toggles whether that starting stack is fanned or flat. Background and Text Color set the section's palette, and Text Fade Start (0-1) controls how early in the scroll the centered headline starts appearing.

One limitation worth knowing before you install: the 8 images, their positions, and the headline copy are fixed for this release - none of that is exposed as a property control yet. What you can adjust is the motion and the palette, not the content.

5c: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.

5d: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.

5e: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

5f: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

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-85a37bb5-62f3-4a45-b1d3-421af1bc0f38-all:/unified/creator/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/activity/":[{"data":[{"id":"01a139b6-24ce-76c3-a0a7-fbd1db2e22f8","type":"template.created","target":{"type":"template","id":"75841","preview":"Kyntra App Webpage","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a139ad-85ad-75bd-8b18-b5b8f3623382.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":"template","visibility":"public","startedAt":"2026-10-14T09:20:00.718Z","latestAt":"2026-10-14T09:20:00.718Z"},{"id":"01a1344b-c97e-7076-b0c4-810434ccf97c","type":"template.created","target":{"type":"template","id":"75704","preview":"Elena Voss Template","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a13447-b87f-702d-90b6-dcb796a5e05e.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":"template","visibility":"public","startedAt":"2026-10-13T08:05:44.446Z","latestAt":"2026-10-13T08:05:44.446Z"},{"id":"01a0d8d1-043a-73d4-bf9f-997b322af7f8","type":"component.created","target":{"type":"component","id":"vzNQdDgwsZjuYAFr34vW","preview":"Dimensional Switch","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a0d8d0-e1dd-731d-a062-5d19f886a1dd.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-25T13:46:11.898Z","latestAt":"2026-09-25T13:46:11.898Z"},{"id":"01a0d8cf-9d4a-7394-bcc0-7da3a8cbb3dd","type":"component.created","target":{"type":"component","id":"DFZNlAUj4NTBWhkFcvbj","preview":"Arc Flow Carousel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a0d8cf-7917-760f-9acf-8c884aa1c55c.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-25T13:44:40.009Z","latestAt":"2026-09-25T13:44:40.009Z"},{"id":"01a0d8ce-8410-72e8-bbcb-66525e70c245","type":"component.created","target":{"type":"component","id":"qh77fnTYNsPfoq2kWSuK","preview":"Zoom Slider","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a0d8ce-64d9-762c-bb5d-29991e99d3a1.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-25T13:43:28.016Z","latestAt":"2026-09-25T13:43:28.016Z"},{"id":"01a0d8cd-7612-7158-b6cb-7131ca721716","type":"component.created","target":{"type":"component","id":"KjDpxax7uBB2zrjGGOAR","preview":"Orbit Flip Slider","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a0d8cd-5bee-7325-a648-1251813e7f2e.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-25T13:42:18.898Z","latestAt":"2026-09-25T13:42:18.898Z"},{"id":"01a0d8cc-7975-732e-a5ad-57ece39719aa","type":"component.created","target":{"type":"component","id":"a4tafHyoaJVCgEtsL0u4","preview":"Ellipse Carousel","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a0d8cc-3280-74a2-82c1-4139a1a9762b.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-25T13:41:14.229Z","latestAt":"2026-09-25T13:41:14.229Z"},{"id":"01a0d8c0-03f7-701f-9086-436ba872ef89","type":"component.created","target":{"type":"component","id":"GHfqAOKzFCfftLS9NiR5","preview":"Phantom Image Trail","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a0d8ca-0237-7374-b46f-3521cda70b0e.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-25T13:27:37.719Z","latestAt":"2026-09-25T13:27:37.719Z"},{"id":"01a0d37c-05f6-77de-bcd0-ef5ebda6eb35","type":"component.created","target":{"type":"component","id":"49ucbRD3YWstcSU67wkJ","preview":"Stack Spread","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a0d37b-1086-771f-9fbe-f060cc0a4286.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-24T12:55:15.702Z","latestAt":"2026-09-24T12:55:15.702Z"},{"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":"01a139b6-2258-76cb-bf27-79d3b005b3d3","title":null,"body":"$52","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hi everyone! We've just released Kyntra, a one-page landing template for a home-services app."}]},{"type":"paragraph","content":[{"type":"text","text":"We built most of the page around the scroll. The hero sits on an animated gradient, the About phones drift apart, a large statement fills in with colour, the feature cards stack on top of each other, and a row of cards slides sideways while the section is pinned. A timeline draws itself down the \"How it works\" steps, the stats roll up digit by digit, and on desktop the footer is revealed from underneath."}]},{"type":"paragraph","content":[{"type":"text","text":"\"Get Started\" opens an enquiry form, \"Download Kyntra App\" slides in a panel with a QR code, and the FAQ opens one question at a time. We set it up for Desktop, Tablet and Phone, with a full-screen menu on smaller screens. On touch devices, the blog card details stay visible instead of waiting for a hover."}]},{"type":"paragraph","content":[{"type":"text","text":"The animated sections are code components, so you edit their content, colours and timings in the properties panel. Testimonials, stats and articles are fictional demo content, ready to swap."}]},{"type":"paragraph","content":[{"type":"text","text":"We'd love to hear what you think, especially about how the scroll interactions feel on Tablet and Phone."}]}]},"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":"75841","resolved":true,"title":"Kyntra App Webpage","body":"$53","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Kyntra is a one-page landing template for a home-services app, with scroll-driven sections, an enquiry form, an app download panel, and layouts for Desktop, Tablet and Phone."}]},{"type":"customHeading","content":[{"type":"text","text":"Page sections"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero: headline, store buttons and a phone mockup over an animated gradient background."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"About: three phone screens that drift in opposite directions as you scroll (desktop)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Statement: a large sentence that fills in with colour as you scroll."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Features: five cards that stack as you scroll."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smarter: cards that slide sideways while the section is pinned, with a pointer spotlight on desktop."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"How it works: a timeline line that draws down as you scroll."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Trust: stats that roll up digit by digit."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Testimonials: photo, quote and prev/next buttons, plus a draggable thumbnail strip on desktop."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Blogs: a row of article cards with arrows. Details show on hover, and always on touch devices."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"FAQ: one question open at a time, with a height animation."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"CTA and footer: the CTA turns blue on hover, and the footer is revealed from underneath (desktop)."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"\"Get Started\" opens an enquiry form, and \"Download Kyntra App\" opens a side panel with a QR code. Headings rise in line by line as they come into view."}]},{"type":"customHeading","content":[{"type":"text","text":"Built for easy editing"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Desktop (1280), Tablet (768) and Phone (390) breakpoints, with a full-screen menu on Tablet and Phone."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text and colour styles on every native text layer."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated sections are code components, with content, colours and timings editable in the properties panel."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animations respect the reduced-motion setting."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fonts: Host Grotesk and DM Sans (Google Fonts, Open Font License)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A Read Me page explains the setup."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Good to know"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Testimonials, stats and articles are demo content with fictional names."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The enquiry form sends to any form endpoint URL you paste in (for example Formspree). Without one, it opens the visitor's email app."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The QR code and store links are placeholders to replace."}]}]}]}]},"introduction":"A one-page landing template.","slug":"kyntra-app-webpage","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/01a139ad-85ad-75bd-8b18-b5b8f3623382.png","metadata":{"tint":{"h":227,"s":75,"l":19},"width":1800,"height":1360}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a139ad-5e65-7279-9aba-22d2ce40e020.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1208,"height":840}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a139ae-2b7d-70a1-af77-ea2f3a02d35c.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1800,"height":1360}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a139ae-006b-735d-b128-c87469302d7c.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1800,"height":1360}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a139ad-ffb4-757e-8fe0-6b4d1f7b46ab.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1800,"height":1360}}],"post":null,"createdAt":"2026-10-14T09:19:59.415Z","updatedAt":"2026-10-14T09:19:59.415Z","publishedAt":"2026-10-14T09:19:59.412Z","featuredAt":null,"approvedAt":null,"type":"template","attributes":{"price":"39","paymentUrl":"https://contra.com/products/sXq2r6Au-kyntra-landing-page-template-framer-nextjs","remixUrl":null,"previewUrl":"https://kyntra-landing.framer.website/","categories":[],"styles":[{"id":220,"name":"Gradient","slug":"gradient"},{"id":109,"name":"Modern","slug":"modern"},{"id":110,"name":"Animated","slug":"animated"}],"mainCategory":{"id":271,"name":"Apps","slug":"apps"},"features":[],"tags":[],"isAgentTemplate":false,"demoVideo":null,"skills":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-14T09:20:00.088Z","updatedAt":"2026-10-14T09:20:00.088Z"},{"id":"01a1344b-c6f3-7592-b927-7e01110bf6c3","title":null,"body":"

Hi everyone! We just released Elena Voss, a one-page portfolio template for web and brand designers.

Most of the page moves with the scroll. The hero portrait scales down as you scroll, project cards stack on top of each other, the services row slides in sideways while the section is pinned, and client logos fly in from depth. On desktop, a floating image follows you through the awards list, and the dividers bend under the pointer. There's also a swipeable testimonial carousel, an FAQ, and a contact form that opens in a modal from every "Get in Touch" button.

It's set up for Desktop, Tablet and Phone, and all logos, awards and testimonials are fictional demo content, ready to swap.

We'd love to hear what you think, especially about how the scroll interactions feel on Tablet and Phone.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hi everyone! We just released Elena Voss, a one-page portfolio template for web and brand designers."}]},{"type":"paragraph","content":[{"type":"text","text":"Most of the page moves with the scroll. The hero portrait scales down as you scroll, project cards stack on top of each other, the services row slides in sideways while the section is pinned, and client logos fly in from depth. On desktop, a floating image follows you through the awards list, and the dividers bend under the pointer. There's also a swipeable testimonial carousel, an FAQ, and a contact form that opens in a modal from every \"Get in Touch\" button."}]},{"type":"paragraph","content":[{"type":"text","text":"It's set up for Desktop, Tablet and Phone, and all logos, awards and testimonials are fictional demo content, ready to swap."}]},{"type":"paragraph","content":[{"type":"text","text":"We'd love to hear what you think, especially about how the scroll interactions feel on Tablet and Phone."}]}]},"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":"75704","resolved":true,"title":"Elena Voss Template","body":"$54","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Elena Voss is a one-page portfolio template for web and brand designers, with scroll-driven sections, a contact form in a modal, and layouts for Desktop, Tablet and Phone."}]},{"type":"customHeading","content":[{"type":"text","text":"Page sections"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero:"},{"type":"text","text":" ","marks":[{"type":"bold"}]},{"type":"text","text":"a large headline with a portrait that scales down as you scroll."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio: project cards that stack as you scroll, with a progress line for the active project."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Why work with me: three cards."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Services: cards that slide in sideways while the section is pinned, with a gradient fill on hover."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Awards: on desktop, a floating image follows the hovered row and the dividers bend under the pointer."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Client logos: they fly in from depth as you scroll."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Testimonials: a carousel with prev/next buttons, avatar thumbnails and swipe on touch."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"FAQ: items open and close with a height animation."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Footer: contact card, links that underline on hover, and social icons."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Every \""},{"type":"text","text":"Get in Touch","marks":[{"type":"bold"}]},{"type":"text","text":"\" button opens the contact form. The header hides when you scroll down and comes back when you scroll up."}]},{"type":"customHeading","content":[{"type":"text","text":"Built for easy editing"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Desktop (1280), Tablet (768) and Phone (390) breakpoints."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text and colour styles on every native text layer."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"FAQ built as a native component with Open and Closed variants."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated sections are code components, with content, colours and timings editable in the properties panel."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animations respect the reduced-motion setting."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Font: Host Grotesk (Google Fonts, Open Font License)."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"A Read Me page explains the setup."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Good to know"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Logos, awards and testimonials are demo content with fictional names."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The contact form sends to any form endpoint URL you paste in (for example Formspree). Without one, it opens the visitor's email app."}]}]}]}]},"introduction":"A one-page portfolio template","slug":"elena-voss-template","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/01a13447-b87f-702d-90b6-dcb796a5e05e.png","metadata":{"tint":{"h":0,"s":90,"l":16},"width":1208,"height":840}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a13447-d983-77b2-b481-4c994da86bae.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1800,"height":1360}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a13447-d94f-779d-8648-fb379be2856f.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1800,"height":1360}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a13447-d95c-76eb-8eed-47beaca7098f.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1800,"height":1360}},{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/85a37bb5-62f3-4a45-b1d3-421af1bc0f38/01a13447-d981-70ab-b8e6-87bfe49b8185.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1800,"height":1360}}],"post":null,"createdAt":"2026-10-13T08:05:43.099Z","updatedAt":"2026-10-13T08:05:43.099Z","publishedAt":"2026-10-13T08:05:43.090Z","featuredAt":null,"approvedAt":null,"type":"template","attributes":{"price":"39","paymentUrl":"https://contra.com/payment-link/fRtYj9QE-elena-voss-framer-portfolio-template-framer-template-figma-file","remixUrl":null,"previewUrl":"https://elenavoss.framer.website/","categories":[],"styles":[{"id":109,"name":"Modern","slug":"modern"},{"id":110,"name":"Animated","slug":"animated"},{"id":208,"name":"Dark","slug":"dark"}],"mainCategory":{"id":19,"name":"Portfolio","slug":"portfolio"},"features":[],"tags":[],"isAgentTemplate":false,"demoVideo":null,"skills":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":2,"edited":true,"editedAt":"2026-10-13T08:22:10.323Z","createdAt":"2026-10-13T08:05:43.795Z","updatedAt":"2026-10-13T08:22:10.323Z"},{"id":"01a0d8d1-0201-77fc-a1ca-ea78d4496fa4","title":null,"body":"

Dimensional Switch: a slider where the image card flips in 3D and the headline swaps with it. Horizontal or vertical flip, arrows, dots and optional autoplay that pauses off-screen. Empty slides show placeholders until you add images.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Dimensional Switch: a slider where the image card flips in 3D and the headline swaps with it. Horizontal or vertical flip, arrows, dots and optional autoplay that pauses off-screen. Empty slides show placeholders until you add images."}]}]},"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":"vzNQdDgwsZjuYAFr34vW","resolved":true,"title":"Dimensional Switch","body":"$55","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"An image card that flips in 3D to show the next slide, while the headline swaps with a turn-and-slide motion. It flips horizontally or vertically, with arrow buttons, dot navigation and optional autoplay."}]},{"type":"paragraph","content":[{"type":"text","text":"Key features:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Horizontal or vertical flip"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Arrow buttons and clickable dots"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay with adjustable delay (1–10s); pauses when off-screen or when the tab is hidden"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Loop, or stop at the first and last slide"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"5 easing presets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable card size, corner radius, text size, text, accent and background colours"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 12 slides, each with an image and text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Slides without an image show a gradient or solid placeholder"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced motion: slides change without the flip animation"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"How to use:","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop it into a frame; it fills the frame."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add slides (image and text) in Slides."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose the flip axis, easing and autoplay."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set card size and colours."}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"3D card-flip slider with text swap","slug":"dimensional-switch","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/01a0d8d0-e1dd-731d-a062-5d19f886a1dd.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-25T13:46:10.719Z","updatedAt":"2026-09-25T13:46:10.719Z","publishedAt":"2026-09-25T13:46:10.716Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/HyperiuxDimensionalSwitch-m2RBxh.js@e5TRfvZbq8j4ylwVGleX","previewUrl":"https://hyperiux-vault.framer.website/dimensional-switch-slider","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"e5TRfvZbq8j4ylwVGleX","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-25T13:46:11.329Z","updatedAt":"2026-09-25T13:46:11.329Z"},{"id":"01a0d8cf-9b03-7688-8ec9-75ca2455c84d","title":null,"body":"

Arc Flow Carousel: drag, flick or scroll image cards around an arc. Nearby cards follow with a slight lag. Snap, auto-rotation, hover captions and keyboard control included.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Arc Flow Carousel: drag, flick or scroll image cards around an arc. Nearby cards follow with a slight lag. Snap, auto-rotation, hover captions and keyboard control included."}]}]},"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":"DFZNlAUj4NTBWhkFcvbj","resolved":true,"title":"Arc Flow Carousel","body":"$56","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Image cards arranged along a wide arc. Drag or flick to spin them; cards further from the one you grab follow with a slight lag. Also works with the trackpad or mouse wheel and the arrow keys."}]},{"type":"paragraph","content":[{"type":"text","text":"Key features:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag and flick with adjustable momentum"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional snap to the nearest card"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Wheel control: horizontal only, both directions, or off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Arrow keys when focused"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional slow auto-rotation that pauses on hover"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover captions (title and description), can be turned off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable arc radius, arc position, card size, aspect ratio, overlap and corner radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 20 items; the cards repeat endlessly"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Items without an image show a gradient or solid placeholder"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pauses off-screen; reduced motion removes the lag, the fling and the auto-rotation"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"How to use:","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop it into a frame; it fills the frame."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add images, titles and descriptions in Items."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tune the arc and card size."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose wheel behaviour and snap."}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Draggable cards fanned on an arc","slug":"arc-flow-carousel","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/01a0d8cf-7917-760f-9acf-8c884aa1c55c.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-25T13:44:38.764Z","updatedAt":"2026-09-25T13:44:38.764Z","publishedAt":"2026-09-25T13:44:38.760Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/HyperiuxArcFlowCarousel-K3n60z.js@qAlOYU7ERjtwbK5mfF8W","previewUrl":"https://hyperiux-vault.framer.website/arc-flow-carousel","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"qAlOYU7ERjtwbK5mfF8W","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-25T13:44:39.427Z","updatedAt":"2026-09-25T13:44:39.427Z"},{"id":"01a0d8ce-81bb-70f1-955d-8655dde72f3c","title":null,"body":"

Zoom Slider: an endless image strip where cards grow as they come in. Scroll, drag or swipe; hover for a line-by-line caption reveal.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Zoom Slider: an endless image strip where cards grow as they come in. Scroll, drag or swipe; hover for a line-by-line caption reveal."}]}]},"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":"qh77fnTYNsPfoq2kWSuK","resolved":true,"title":"Zoom Slider","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"An endless strip of images along the bottom of the frame. Cards start small on the left and grow as they move right. Scroll, drag or swipe to move it. Hovering a card shows its number, title and description line by line."}]},{"type":"paragraph","content":[{"type":"text","text":"Key features:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Scroll, drag and touch, with coasting after you let go"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Endless loop"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover text reveal and 1.05× image zoom, each can be turned off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable size and how gradually cards grow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editable heading and subheading"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Screen readers announce the current slide"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 20 items; items without an image show a gradient or solid placeholder"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pauses off-screen; reduced motion turns off the coasting and smoothing"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Disclosure (include this in the listing):","marks":[{"type":"bold"}]},{"type":"text","text":" While the pointer is over the slider, the mouse wheel moves the slider and the page won't scroll. Turn off Scroll Wheel if visitors need to scroll past it. On touch screens, swiping over it moves the slider instead of the page."}]},{"type":"paragraph","content":[{"type":"text","text":"How to use:","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop it into a frame; it fills the frame."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add images, titles and descriptions in Items."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set Size and Ease Range."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Turn off Scroll Wheel if the page needs to scroll past it."}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Looping image strip, cards grow in","slug":"zoom-slider","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/01a0d8ce-64d9-762c-bb5d-29991e99d3a1.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-25T13:43:26.779Z","updatedAt":"2026-09-25T13:43:26.779Z","publishedAt":"2026-09-25T13:43:26.772Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/HyperiuxZoomSlider-Pna1B9.js@IchCOZJtMvG1gxlABnIk","previewUrl":"https://hyperiux-vault.framer.website/zoom-slider","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"IchCOZJtMvG1gxlABnIk","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-25T13:43:27.419Z","updatedAt":"2026-09-25T13:43:27.419Z"},{"id":"01a0d8cd-73d9-72bb-bc96-84354c42fe21","title":null,"body":"

Orbit Flip Slider: a ring of cards you can view four ways: Flat, Tilt, Ring or Gallery. Every card animates to its new spot when you switch. Slow idle spin, hover pop, and each mode is adjustable.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Orbit Flip Slider: a ring of cards you can view four ways: Flat, Tilt, Ring or Gallery. Every card animates to its new spot when you switch. Slow idle spin, hover pop, and each mode is adjustable."}]}]},"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":"KjDpxax7uBB2zrjGGOAR","resolved":true,"title":"Orbit Flip Slider","body":"$58","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A ring of image cards with four views: Flat, Tilt, Ring and Gallery. Switching views animates every card to its new place. The ring spins slowly and pauses on hover, and hovering a card pops it out with a turn."}]},{"type":"paragraph","content":[{"type":"text","text":"Key features:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Four modes switched with on-screen buttons; the buttons can be hidden and the starting mode chosen"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated transition between modes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Idle spin with adjustable speed and direction; pauses on hover (optional)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover pop with adjustable lift and turn angle"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Each mode's rotation, radius and scale is adjustable separately"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable card size, gap and corner radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 40 items; items without an image show a gradient or solid placeholder"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pulls the ring in on frames narrower than 768px"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pauses off-screen; reduced motion stops the spin, transitions and hover pop"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"How to use:","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop it into a frame; it fills the frame."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add images in Items."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pick a starting mode and card size."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust each mode's settings or hide the mode buttons."}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Card ring with four camera modes","slug":"orbit-flip-slider","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/01a0d8cd-5bee-7325-a648-1251813e7f2e.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1440,"height":1080}}],"post":null,"createdAt":"2026-09-25T13:42:17.689Z","updatedAt":"2026-09-25T13:42:17.689Z","publishedAt":"2026-09-25T13:42:17.686Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/HyperiuxOrbitFlipSlider-vB1rTs.js@ghFXjMEeq4SviHIZBrwq","previewUrl":"https://hyperiux-vault.framer.website/orbit-flip-slider","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"ghFXjMEeq4SviHIZBrwq","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-25T13:42:18.329Z","updatedAt":"2026-09-25T13:42:18.329Z"},{"id":"01a0d8cc-772a-777a-8a19-1c35a473d021","title":null,"body":"

Ellipse Carousel: cards orbit an ellipse, largest on the right. Autoplay steps one card at a time; drag to spin it yourself. Mix images and text tiles.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Ellipse Carousel: cards orbit an ellipse, largest on the right. Autoplay steps one card at a time; drag to spin it yourself. Mix images and text tiles."}]}]},"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":"a4tafHyoaJVCgEtsL0u4","resolved":true,"title":"Ellipse Carousel","body":"$59","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Cards travel around an ellipse, growing as they reach the right side and shrinking toward the left, with an optional label in the centre. It steps one card at a time on autoplay, and you can drag it around; it snaps to the nearest card when you let go."}]},{"type":"paragraph","content":[{"type":"text","text":"Key features:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay with adjustable hold time, step duration and 5 easing presets"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag around the ellipse; snaps to the nearest card on release"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pauses on hover (optional)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Each item can be an image, a text tile (title, subtitle, fill and text colour), or a placeholder"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable ellipse width and height, card size, corner radius and far-card scale"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional centre label with editable text and colour"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 30 items"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pauses off-screen; reduced motion turns off autoplay and snaps without animation"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"How to use:","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop it into a frame; it fills the frame."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add images, or titles for text tiles, in Items."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set the ellipse size and card size."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust autoplay timing or turn it off."}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Cards orbiting an elliptical path","slug":"ellipse-carousel","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/01a0d8cc-3280-74a2-82c1-4139a1a9762b.jpg","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1440,"height":1080}}],"post":null,"createdAt":"2026-09-25T13:41:13.045Z","updatedAt":"2026-09-25T13:41:13.045Z","publishedAt":"2026-09-25T13:41:13.038Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/HyperiuxEllipseCarousel-hRJWvn.js@UZUvrqw02NhBat0J5VQK","previewUrl":"https://hyperiux-vault.framer.website/ellipse-carousel","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"UZUvrqw02NhBat0J5VQK","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-25T13:41:13.642Z","updatedAt":"2026-09-25T13:41:13.642Z"},{"id":"01a0d8c0-01b5-772e-9913-2f8737d079d4","title":null,"body":"

Phantom Image Trail: images pop in under your cursor and fade out as you move. Idle spawning, tilt, scale and timing are all adjustable, and on touch devices a tap spawns an image.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Phantom Image Trail: images pop in under your cursor and fade out as you move. Idle spawning, tilt, scale and timing are all adjustable, and on touch devices a tap spawns an image."}]}]},"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":"GHfqAOKzFCfftLS9NiR5","resolved":true,"title":"Phantom Image Trail","body":"$5a","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Images appear under the cursor as it moves across the frame, each one popping in and fading out. When the cursor rests, images keep spawning at a slower pace (optional). On touch devices, tapping spawns an image."}]},{"type":"paragraph","content":[{"type":"text","text":"Key features:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Spawns an image each time the cursor travels a set distance (adjustable)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional idle spawning while the cursor rests, with its own timing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smoothed cursor following (adjustable)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable pop-in and fade-out duration, easing, and start, end and exit scale"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional random tilt on pop-in and exit"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 8 copies of the image set on screen at once"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tap to spawn on touch devices, or turn it off on mobile"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reacts only to the cursor inside its own frame, so several instances on a page don't interfere"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pauses off-screen and when the tab is hidden"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced motion and the Framer canvas show a still, diagonal trail of images"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"How to use:","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop it into a frame; it fills the frame."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add your images in Images."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set Trigger Distance and the pop and fade timing."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Place content behind it; the frame is transparent."}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Images that trail the cursor","slug":"phantom-image-trail","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/01a0d8ca-0237-7374-b46f-3521cda70b0e.jpg","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1440,"height":1080}}],"post":null,"createdAt":"2026-09-25T13:27:36.431Z","updatedAt":"2026-09-25T13:38:39.790Z","publishedAt":"2026-09-25T13:27:36.425Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/HyperiuxPhantomImageTrail-O78pNp.js@6FR0PYATr6QR9tWDNNV0","previewUrl":"https://hyperiux-vault.framer.website/phantom-image-trail","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"c0182b81-fefe-45f5-ba00-27459f05e2a7","name":"Cursors","slug":"cursors"}],"lastSaveId":"6FR0PYATr6QR9tWDNNV0","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-25T13:27:37.141Z","updatedAt":"2026-09-25T13:27:37.141Z"},{"id":"01a0d37c-03bf-70cc-8a52-5b7796f2e053","title":null,"body":"

Component #5: Stack Spread

Eight cards start clustered in a pile, then scatter across the screen as you scroll - each one on its own rotation and depth, with a little cursor drift once they've settled. A headline fades in partway through the scatter.

Built on framer-motion's scroll and spring hooks, not GSAP. Scroll length, stack scale, card radius, cluster rotation, background and text color are all exposed as controls. Respects reduced motion - rotation and the headline's scale-in flatten, cursor parallax turns off.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Component #5: Stack Spread"}]},{"type":"paragraph","content":[{"type":"text","text":"Eight cards start clustered in a pile, then scatter across the screen as you scroll - each one on its own rotation and depth, with a little cursor drift once they've settled. A headline fades in partway through the scatter."}]},{"type":"paragraph","content":[{"type":"text","text":"Built on framer-motion's scroll and spring hooks, not GSAP. Scroll length, stack scale, card radius, cluster rotation, background and text color are all exposed as controls. Respects reduced motion - rotation and the headline's scale-in flatten, cursor parallax turns off."}]}]},"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":"49ucbRD3YWstcSU67wkJ","resolved":true,"title":"Stack Spread","body":"$5b","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Eight image cards start clustered in a stack. Scroll, and they fan out across the screen - each card gets its own rotation and depth, drifting slightly with cursor position once the spread finishes. A centered headline fades in partway through."}]},{"type":"paragraph","content":[{"type":"text","text":"Built on framer-motion's scroll and spring hooks - no GSAP, no canvas. Card radius, stack scale, cluster rotation, background and text color, and the scroll distance the spread plays out over are all exposed as controls. Respects reduced motion: rotation and scale-in flatten, cursor parallax turns off."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"8 photo cards scatter from a clustered stack as the page scrolls, no scroll-jacking library involved"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Each card carries its own rotation, offset, and depth, so the scatter reads as organic rather than uniform"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cursor parallax kicks in once the cards are fully spread, and pauses automatically once you scroll past the section"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Centered headline fades in partway through the scatter, timed to scroll progress"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reduced-motion aware: card rotation and the headline's scale-in flatten, cursor parallax turns off entirely"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer-motion only no GSAP, no canvas, no extra runtime dependency"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Use"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Drop the component onto a page. It sets its own section height from the Scroll Length control (in vh) - the scatter plays out over that scroll distance, so give it room."}]},{"type":"paragraph","content":[{"type":"text","text":"Stack Scale and Card Radius shape the clustered starting look; Cluster Rotation toggles whether that starting stack is fanned or flat. Background and Text Color set the section's palette, and Text Fade Start (0-1) controls how early in the scroll the centered headline starts appearing."}]},{"type":"paragraph","content":[{"type":"text","text":"One limitation worth knowing before you install: the 8 images, their positions, and the headline copy are fixed for this release - none of that is exposed as a property control yet. What you can adjust is the motion and the palette, not the content."}]}]},"introduction":"Images scatter as you scroll","slug":"stack-spread","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/01a0d37b-1086-771f-9fbe-f060cc0a4286.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-24T12:55:14.539Z","updatedAt":"2026-09-25T11:56:08.056Z","publishedAt":"2026-09-24T12:55:14.537Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/HyperiuxStackSpread-v5ZWkr.js@OPkkLbtFkTstio8lBgkk","previewUrl":"https://hyperiux-vault.framer.website/stack-spread","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"OPkkLbtFkTstio8lBgkk","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-24T12:55:15.135Z","updatedAt":"2026-09-24T12:55:15.135Z"},{"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":"$5c","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":"$5d","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":"$5e","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":"$5f","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":"$L60"}]