All projects · UI Components & Interactions
st.dev Component Integration: Animated Testimonials
An interactive 3D stacked card testimonial rotator inspired by 21st.dev and Aceternity UI, adapted directly onto the Puzzle Archive website.
An interactive 3D stacked card testimonial rotator inspired by 21st.dev and Aceternity UI, adapted directly onto the Puzzle Archive website. Features spring rotational card physics, depth-of-field z-indexing, word-by-word staggered typography reveals, 21st.dev prompt inspector with one-click AI prompt clipboard export, and real engineering peer reviews.
- Implements the challenge clue 'copy the prompt of the component' with a 1:1 replica of the 21st.dev AI prompt copier and modal inspector
- 3D perspective card deck with spring rotational physics and depth scaling (scale 1.0, 0.95, 0.90, alternating ±7° tilt)
- Aceternity UI word-by-word staggered reveal animation implemented with zero external animation dependencies
- Dual adaptation: delivered both as a standalone interactive playground with physics sliders and embedded directly into the Puzzle Archive website
- Preset switcher between Puzzle Archive Peer Reviews, 21st.dev Classic (Sarah Chen @ TechFlow), and Custom Testimonial Creator
- Autoplay engine with circular SVG countdown timer and hover-pause capability
- Full keyboard (ArrowLeft/ArrowRight) and mobile touch-swipe gesture support
- Built-in automated 8-point in-browser diagnostic test suite verifying card hierarchy, typography stagger, and clipboard API execution
Built with: 21st.dev Component Registry, Aceternity UI, 3D CSS Transforms, Spring Physics, Word-by-Word Stagger, Prompt Engineering, Zero-Dependency Vanilla JS, Accessibility & Keyboard Controls