Arc Portfolio Deck
Present selected projects as an interactive arc of editorial cards with drag, keyboard navigation and editable project links.
Quick Start
- Copy a prepared Editorial Cream or Midnight Archive instance into your Framer page.
- Set Width to Fill inside a stack and Height to Fit content.
- Open Projects and replace each project's image, name, category and year. Add, reorder or remove projects in the same list.
- Set Project link to the project's page, section or external URL. An empty link hides its CTA.
- Adjust Appearance, Deck geometry, Title font, Metadata font and Interaction for your composition.
- Test in Framer Preview on desktop and mobile. Check drag, navigation, image crops, links and the full component height.
Canvas shows a stable view of Initial project. Preview provides the interactive experience. The two prepared presets are independent instances of the same component.
Content
Projects supports up to 100 items. Each item has Image, Name, Category, Year, Project link, New tab and Advanced → Stable ID. Year is text, so a range such as “2024–2026” works. Empty category and year fields leave no stray separator. Long names wrap and can increase the component's height.
Edit image alternative text in the image picker. If absent, it falls back to the project name, then Content → Image fallback. Missing or failed images display a visible fallback.
Each project can link to a different page, section or external URL through Project link. Click the active image or its CTA to open that destination. Selecting a side card brings that project to the center first. New tab applies to both the image and CTA. Without a Project link, the image stays unlinked and the CTA is hidden. Replace demo destinations when copying the deck into another site.
A unique Stable ID preserves selection when editing or reordering projects. Native Framer item IDs are also recognized. Without either, identity is derived from the item's content and duplicate occurrence order. Indistinguishable duplicates cannot retain individual identity through arbitrary rearrangement; do not reuse explicit IDs.
Content lets you change Heading, CTA, Drag help, Empty state, Unnamed project, Image fallback, Select label and Announcement. The last two accept {name}, {index} and {total}. Removing all Projects leaves the configured empty state rather than restoring sample content.
Appearance
Appearance → Preset offers Editorial Cream, Midnight Archive and Custom. The first two own their palettes. Custom exposes Background, Surface, Text, Secondary, Accent and Border. Radius applies to all three.
Title font and Metadata font are native extended font controls. The prepared instances use Noto Serif and Inter, with Georgia and Arial as portable fallbacks. Font changes can alter the required height.
Coral and gold controls use dark ink. Check contrast again when changing custom colors; focus outlines use the main text color.
Deck Geometry
| Control | Default | Effect |
|---|---|---|
| Card width | 300 px | Maximum width; narrows to fit the component. |
| Width / height | 0.75 | Minimum card proportions; long text can grow the card. |
| Arc depth | 70 | Vertical descent of outer cards; 0 flattens the path. |
| Overlap % | 50 | Horizontal spacing; higher values expose less of neighboring cards. |
| Rotation ° | 11 | Outward rotation per position, independent of depth and spacing. |
| Desktop cards | 5 | Settled visible window; choose 3, 5 or 7. |
| Mobile cards | 3 | Settled mobile window; choose 1 or 3. |
| Stage padding | 28 px | Space for transformed cards and shadows. |
| Advanced scale → Active | 1 | Scale of the centered card. |
| Advanced scale → Side | 0.88 | Side-card scale, capped at the active scale. |
Adjust overlap before increasing density in a narrow layout. The stage reserves room for rotation, arc depth, scale and measured card height. Side edges intentionally crop at narrow widths.
Interactions
Drag left to advance and right to go back. Each gesture confirms at most one adjacent project. A small gesture returns to its starting point; a short, sufficiently fast flick can advance. Extended drags meet resistance. Dragging over the active image or CTA does not open its link.
Side-card selection can move directly to a nonadjacent visible project. Buttons and arrow keys can change direction before a snap finishes; motion continues from the current visual position.
| Control | Default | Effect |
|---|---|---|
| Initial project | 1 | One-based initial selection. |
| Loop | On | Continues through the collection's ends. |
| Drag | On | Enables horizontal pointer gestures. |
| Sensitivity | 1 | Adjusts drag distance response. |
| Hover lift | On | Lifts side cards on hover-capable fine-pointer devices. |
| Lift px | 14 px | Amount of side-card lift. |
| Snap ms | 360 ms | Snap duration; reduced motion makes selection immediate. |
| Offer autoplay | Off | Offers Play/Pause; playback still requires pressing Play. |
| Interval s | 5 s | Delay between playback advances. |
Hover does not change selection and is neutralized during drag. With Loop off, ends are asymmetric, gestures resist the boundary and unavailable arrows are disabled. One project is stable without navigation; zero shows the empty state. Two or three looping projects recycle unique cards with an opacity transition at the seam, and even counts have asymmetric placement. No duplicate filler cards are created.
Autoplay advances one project per interval after explicit Play. Hover suspends its timer. Manual navigation, pointer interaction, focus changes, leaving the viewport, window blur and a hidden document stop playback. Press Play again to resume. Non-loop playback stops at the last project. Reduced motion disables playback; the Play button's own focus does not cancel its activation.
Navigation controls Show arrows, Show counter, Show drag help, Previous label, Next label, Play label, Pause label and Collection name. Arrow keys remain available when visible arrows are hidden. Media & shadow controls Image fit (cover or contain), Crop position and Shadow (None, Soft, Medium or Strong). Defaults are cover, 50% 50% and Soft.
Responsive Behavior
Density responds to the component's own measured width. Below 850 px the default desktop density reduces to three cards. Below 600 px, Mobile cards applies, arc depth becomes 45% of its desktop value and rotation becomes 60%. A narrow column on a large screen receives the same adaptations.
Horizontal pointer gestures preserve normal vertical page scrolling. The stage uses touch-action: pan-y pinch-zoom, and does not intercept wheel scrolling. Pinch zoom remains under browser control.
Use Fit content height. Default instances are roughly 750 px tall on desktop and 640 px on mobile, depending on fonts and content. A 700 px desktop viewport may need normal scrolling to reach all controls. Long text or larger fonts can increase height; avoid a short fixed-height parent with clipped overflow. Fill-height is not supported.
Recommended Usage
Use the deck for selected portfolio projects, photographic studies, product collections and editorial work. Five to twelve carefully chosen projects make a readable first impression. Collections of 30 were included in validation; only the neighborhood around the active project is mounted.
Best Practices
Use distinct images, concise metadata, meaningful alt text and real destinations. Supply stable IDs for frequent content edits. Keep touch targets and check your chosen fonts at narrow widths. Replace all fictional sample projects before presenting the deck as your own portfolio.
Accessibility
The deck is a named region with keyboard focus. Left/right arrows navigate within it and are ignored in editable fields. Navigation uses native buttons; the active image link and CTA are real anchors. Side selectors are outside the normal Tab sequence, with equivalent previous/next and arrow-key navigation.
Only the active article exposes its content to assistive technology. Inactive cards have no project links. Manual confirmed selections are announced once; autoplay does not repeat announcements. Focus stays inside the component if navigation would remove a focused image link or CTA. Touch controls target at least 44 × 44 px.
Reduced motion is respected. Automated accessibility checks do not constitute certification. Physical screen-reader testing has not been completed.
Troubleshooting
Cards or controls are clipped
Use Fit content height and allow the parent to grow. Side-card cropping at narrow widths is intentional.
Images are missing after insertion
Select an Image for each project, or copy a prepared instance that retains native image assets.
There is no project CTA
Set Project link on that item. Empty links deliberately hide the CTA.
Colors or movement do not change
Select Custom to edit palette colors. Open Preview for motion; Canvas intentionally remains static.
Playback does not start
Enable Offer autoplay, press Play and move the pointer out of the deck. Reduced motion and the final non-loop project disable playback. Focus or pointer interaction stops an existing session.
Selection changes after editing
Supply a unique Stable ID. Without it or a native item ID, changing content can change the item's identity. Removing the active item selects the next available item at that index or the last remaining neighbor.
FAQ
Can I configure it without editing code?
Yes. Use a prepared Framer instance and its native property panel.
Are the two presets different components?
No. They are independent instances of the same component.
Does it require an external service?
No. Uploaded images use normal Framer image hosting.
Can it connect to CMS, video, a shopping cart or a lightbox?
Those integrations are outside this version.
Does removing all projects restore the samples?
No. An explicitly empty collection stays empty.
Limitations
Height is intrinsic; fixed or Fill-height layouts are not supported. Widths below the tested 320 px need separate review. Small-loop seams use opacity recycling, so the fan is not fully opaque throughout those transitions. Hover is absent on touch-only devices. Fresh code-file insertions may require manual image selection.
Framer Canvas/Preview and Chromium-based browsers were checked. Physical iPhone/Android, Safari, Firefox, physical pinch gestures and screen readers remain unverified. Local 200% CSS zoom checks do not establish complete browser or OS text-scaling support.
Version 1.0 is available. Use the links above to explore the public demo or get the component.
Need help? Visit support or email ARForge Labs.
Changelog
v1.0
Initial release of Arc Portfolio Deck.
- Editable projects arranged in a responsive arc of editorial cards.
- Drag, side-card selection, navigation buttons and keyboard controls.
- Individual project links on active images and CTAs, with optional new tabs.
- Editorial Cream, Midnight Archive and Custom palettes.
- Reduced-motion support, English and Spanish documentation, and a private installation link delivered after purchase.
arforgelabs.support@proton.me