Portal Carousel

Overview

Portal Carousel replaces conventional sliding transitions with an expanding image portal. A smaller preview of the upcoming slide sits within the current scene. When click anywhere on screen, it grows to fill the screen, becoming the new background while another preview introduces what comes next.

Each slide combines fullscreen imagery, an editorial title, a position counter, and a labelled NEXT preview. The transition creates a sense of continuity, making visitors feel as though they are moving into the next image rather than simply switching slides.

Designed for photography, fashion, creative portfolios, and campaign websites, Portal Carousel turns image navigation into a distinctive visual experience. Its fullscreen presentation gives every image room to stand out, while the repeating portal interaction keeps the sequence cohesive.

Usage Code

1import PortalCarousel from '@/components/effects/portal-carousel'2 3const page = () => {4 return (5 <>6 <PortalCarousel />7 </>8 )9}10 11export default page

Example Production Use Case

Consider a creative agency showcasing its strongest campaigns. Instead of displaying projects in a conventional grid, the homepage opens with a fullscreen campaign image, a project title, and a smaller preview of the next project.

When visitors activate NEXT, the upcoming campaign expands from the preview and takes over the screen. Another preview appears, inviting visitors to continue exploring the portfolio.

Each project receives a distinctive entrance without interrupting the browsing experience. The carousel establishes visual interest, while individual case study pages provide the strategy, execution, and results behind the work.

Best Used For

• Showcase selected projects through immersive image transitions.
• Present collections, looks, and editorial imagery.
• Highlight campaign visuals with strong visual progression.
• Introduce new collections through image-led experiences.

Not For

Portal Carousel is not ideal for content-heavy websites, large product catalogues, or interfaces where users need to compare several items simultaneously. Its fullscreen presentation works best when imagery leads the experience.

Avoid combining it with multiple competing animations. The portal transition should remain the defining interaction rather than getting lost among unnecessary visual effects.

Performance Budget

Prioritise the active and upcoming images, use compressed assets, and keep expansion animations lightweight. Preloading the next slide helps prevent delays or blurred visuals during the transition.

Avoid rendering unnecessary inactive slides or running decorative animations offscreen. Simplify movement on lower-powered devices when necessary to maintain responsiveness.

Accessibility and Mobile

Provide keyboard-accessible controls, meaningful image alternatives, readable titles, and visible focus states. The NEXT preview should remain recognisable as a navigation element.

On mobile, preserve image focal points and use comfortable touch targets. Respect prefers-reduced-motion by replacing the expanding portal with a simple fade or immediate slide change.

Common Mistakes

• Sudden image shifts break the portal illusion.
• Blurry or incomplete images interrupt the transition.
• Excessive text competes with the fullscreen visuals.