Access Gateway·Hero

npx zenora-ui-registry@latest add access-gateway

Access Gateway

Hero

400 views•85 uses

Get this component

Copies the component into your project, installs what it needs, and pulls down its images. Nothing to download by hand.

npx zenora-ui-registry@latest add access-gateway

Writes to components/zenora-ui/ by default; override with --dir. The file is yours to edit; there is no package to keep in sync.

Or let an AI agent pull it in for you. Set up the MCP server

A dramatic cinematic reveal with a futuristic loading ring, custom text staggering, and fluid GSAP clip-path transitions.

KEY FEATURES

·Cinematic loading ring sequence that requires user interaction
·Fluid GSAP clip-path page transitions and staggering text reveals
·Fully responsive typography scaling using CSS math and container queries

Props

8 properties

headlinestringThe system is vis…

Main headline text revealed after entering.

buttonLabelstringClick to Enter

Text inside the ring button.

grantedLabelstringAccess Granted

Text shown when access is granted.

backgroundcolor#000000

Primary background color.

foregroundcolor#ffffff

Primary foreground/text color.

trackColorcolor#2b2b2b

Color of the loader track.

textScalenumber100

Scale factor for typography (%).

speednumber100

Playback speed percentage for the GSAP timeline.

Zenora UI

Get Started