What can you build?

Each demo has a controller method in PagesController.php that fetches or computes data and passes it to the template.

API Posts

The controller fetches posts and authors from JSONPlaceholder using Cake\Http\Client and passes them to the template as arrays.

View demo →

Color Palette

The controller reads a hex color from the URL query string, computes a 10-stop tint/shade scale in PHP using HSL math, and returns the swatches.

View demo →

Gallery

Full-screen lightbox with group navigation, keyboard controls, and swipe gestures. Single images, gallery groups, and mixed layouts.

View demo →

Lazy Loading

Images fade in as they enter the viewport — shimmer placeholder, IntersectionObserver, smooth reveal. Includes live counter and replay.

View demo →

Accordion

Collapsible content panels with smooth animations, keyboard support, and single or multiple open modes.

View demo →

Dark Mode

Toggle between light and dark themes with zero flash on reload, cross-tab sync, and full brand-color awareness.

View demo →

Controller → Template pattern

Add a method

Name it page + PascalCase slug in PagesController. It runs automatically before the template.

Fetch or compute

Call an API, query a database, read a file, or run any PHP logic. Set results with $this->set().

Use in template

Variables are available directly in the .php template. No extra wiring needed.