Interaction
Defaults reuse six original monochrome geometric images from this site. Drag horizontally or use arrows, Home and End. Enter one image per line. Card dimensions use pixels, offset uses percent, rotation uses degrees and depth uses pixels. Initial slide is zero based; autoplay interval is milliseconds. Catalog hover, focus and mobile Preview share a demonstration; the title opens the editor.
Effect notes
Image URLs (one per line): [long content; see controls, 2387 characters]；Initial slide: 0；Corner radius: 24；Canvas background: "#f5f4f3"；Loop navigation: true；Autoplay: false；Autoplay interval (ms): 1000；Show navigation: false；Card width: 260；Card height: 330；Stack offset (%): 8；Rotation per card: 2；Depth per card: 100；Show pagination: false
States
The configured initial state uses the saved content above. Logical preview canvas 900 × 600; saved scale 1, offset (0, 0).
Timing
Response basis 300 ms, delay 0 ms. Observation speed is runtime only.
Enter and exit
Drag a stack of geometric image cards, with depth and rotation on the cards behind, and snap on release. Native controls retain their current local state after the demonstration ends.
Repeated input and interruption
Leaving the catalog with focus outside, going offscreen and switching to the background stop the demonstration. Manual input, live selection and playback progress never replace the saved defaults.
Effect notes
The controls, preview, JSON, Motion adapter, prompt project and HTML export use this same saved settings object and renderer. Catalog cards always show project defaults.
Reduced motion
No automatic demonstration; transitions settle immediately. Native text input, buttons, selection and keyboard controls remain available.
Default configuration
These values come from the maintained default configuration. Editor drafts and exported changes can differ.
{
"schemaVersion": 2,
"recipeId": "skiper-48",
"durationMs": 300,
"delayMs": 0,
"easing": [
0.22,
1,
0.36,
1
],
"offsetX": 0,
"offsetY": 0,
"scale": 1,
"loop": false,
"interruption": "retarget",
"tracks": [],
"skiper": {
"images": "data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22320%22%20r%3D%22176%22%20fill%3D%22%23929292%22%2F%3E%3C%2Fsvg%3E%0A\ndata:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23f7f7f7%22%2F%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22320%22%20r%3D%22158%22%20fill%3D%22none%22%20stroke%3D%22%23a0a0a0%22%20stroke-width%3D%2264%22%2F%3E%3Crect%20x%3D%22434%22%20y%3D%22116%22%20width%3D%2258%22%20height%3D%2258%22%20fill%3D%22%23dedede%22%2F%3E%3C%2Fsvg%3E%0A\ndata:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M144%20308a176%20176%200%200%201%20352%200Z%22%20fill%3D%22%23929292%22%2F%3E%3Cpath%20d%3D%22M144%20332a176%20176%200%200%200%20352%200Z%22%20fill%3D%22%23cccccc%22%2F%3E%3C%2Fsvg%3E%0A\ndata:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Crect%20x%3D%22144%22%20y%3D%22144%22%20width%3D%22256%22%20height%3D%22256%22%20fill%3D%22%23dedede%22%2F%3E%3Crect%20x%3D%22264%22%20y%3D%22264%22%20width%3D%22232%22%20height%3D%22232%22%20fill%3D%22%23929292%22%2F%3E%3C%2Fsvg%3E%0A\ndata:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23f7f7f7%22%2F%3E%3Cpath%20d%3D%22m320%20128%20200%20352H120Z%22%20fill%3D%22%23a0a0a0%22%2F%3E%3Cpath%20d%3D%22m320%20252%2092%20162H228Z%22%20fill%3D%22%23ffffff%22%2F%3E%3C%2Fsvg%3E%0A\ndata:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3Crect%20width%3D%22640%22%20height%3D%22640%22%20fill%3D%22%23ffffff%22%2F%3E%3Cpath%20d%3D%22M144%20184h352M144%20368h352%22%20stroke%3D%22%23929292%22%20stroke-width%3D%2240%22%2F%3E%3Cpath%20d%3D%22M144%20276h352M144%20460h352%22%20stroke%3D%22%23cccccc%22%20stroke-width%3D%2240%22%2F%3E%3C%2Fsvg%3E%0A",
"selectedIndex": 0,
"cardWidth": 260,
"cardHeight": 330,
"radius": 24,
"offset": 8,
"rotation": 2,
"depth": 100,
"background": "#f5f4f3",
"loop": true,
"autoplay": false,
"interval": 1000,
"showNavigation": false,
"showPagination": false
}
}Reference and reuse
This effect references Skiper UI. Public source was reviewed when available; Pro examples were independently implemented from their public demonstrations. Use the editor to export the current configuration and runnable renderer. Keep Skiper UI attribution and media notices.
Using it in your own project
Open the editor to run the actual preview and compare changes. This document does not run a separate imitation. Recheck content, input, focus and layout after integrating an export.
Catalog provenance label: Skiper UI. Third-party examples retain their own license and attribution; all current effect renderers are public; the full editor is maintained separately.