Sezione hero regression test 01
Centered foreground media, rich badge icon and split reveal.
Move the pointer across the block. The image must remain visible below the content and the complete hero DOM must stay intact.
https://example.com
Sezione hero regression test 02
Left foreground media with scroll scale, image tilt and border spotlight.
This block stresses transform composition: scroll, pointer and image effects must not overwrite one another.
bash — 80×24
Sezione hero regression test 03
Right foreground media with magnetic image, depth light and ripple background.
The background ripple must coexist with button interaction runtimes without class or namespace collisions.
Transform collision test
Pointer parallax, scroll parallax and image tilt must compose.
The image and text must remain aligned while the block reacts to both scrolling and pointer movement. No effect should erase another transform.
-
Pointer runtime shared across blocks
-
Transform channels composed with CSS variables
-
Cleanup after leaving the block
Image and pointer lifecycle
Magnetic gallery images with depth light and layered scroll.
Open and close the lightbox, move between images and verify that no transform or pointer handler remains stuck.
https://example.com
https://example.com
https://example.com
Cursor hide test
The native cursor should disappear only inside this block.
Leave the block and verify that the normal pointer returns immediately. Keyboard focus and links must remain usable.
Interaction tests
Five interaction effects exposed by the corrected catalogue.
Each following CTA carries the intended interaction slug as diagnostic metadata. The visible button effect is resolved from the matching Button Component configuration in the generated theme.
Interaction · Lift
Button interaction: Lift
Expected interaction slug: lift. Hover, focus and click the primary button.
Interaction · Underline Expand
Button interaction: Underline Expand
Expected interaction slug: underline-expand. Hover, focus and click the primary button.
Interaction · Arrow Slide
Button interaction: Arrow Slide
Expected interaction slug: arrow-slide. Hover, focus and click the primary button.
Interaction · Split Color
Button interaction: Split Color
Expected interaction slug: split-color. Hover, focus and click the primary button.
Interaction · Neon Pulse
Button interaction: Neon Pulse
Expected interaction slug: neon-pulse. Hover, focus and click the primary button.