Repository navigation
image-effects: one element for photo effects (pixelate, tiles, gallery-open and six more) - #38
Merged
Merged
Conversation
Pixelate, tiles and gallery-open come from the MLP Technologies rebuild (the Aine theme's gallery hover and image gallery hero, Slider Revolution's tile transition), generalized: cover-fit tiles in px, a container-relative strip, a pause button and reduced-motion handling the originals lacked. Zoom, grayscale, duotone, tilt, shine and caption round it out (tilt after vanilla-tilt.js, caption/zoom/shine after imagehover.css, both MIT, reimplemented). One file, effects picked with `effect`; a page of CSS-only effects ships no script. Demo scenes are our own generated SVG drawings. scripts/check-image-effects.mjs pins the effect list against the catalogue, motion only under no-preference, hover never without focus, the runtime once per page, alt on every image and the tiles' no-JS markup, with 9 mutants. Co-Authored-By: Claude Opus 5.5 <[email protected]>
Owner
Author
|
Skill section: https://github.com/ecropolis/agent-skills/pull/68 (house-stack 0.57.0). |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds
image-effectsto the media category: one element page that showcases several named photo effects and can grow. It carries over the effects built by hand for the MLP Technologies rebuild, and adds six common hover effects.Effects
pixelatesrc/scripts/pixelate.ts(Aine theme)tilesHeroSlider.astro(Slider Revolution)gallery-open--p1/--p2from scrollHeroGallery.astro(Aine theme)zoom,grayscale,duotone,shine,captiontiltChanges from the MLP originals
700% 700%, so photos of any shape keep their proportions. The leaving slide stays under the incoming tiles, so there are no black gaps. It also gains a 44px pause button (WCAG 2.2.2), waits on hover, focus, off screen and in hidden tabs, and exposesautoplay,intro,intervalandgrid.100vw/50vh.prefers-reduced-motion(tracked live) and degrades to a plain image without JS. A page of only the CSS effects ships no script.ie-classes, because canvases and tiles are made by the script.Also
public/demo/scene-*.svg, generated), not client photos. On the hub (quiet), the slideshow neither flies in on load nor advances.scripts/check-image-effects.mjsis added tonpm run checkwith 9 mutants.image hover effects; a comment says so. Please measure it and revise.animated-text.Verified
npm run check: all green (47 elements)./image-effects/): the pixelate canvas appears and is removed at 500 ms; tilt transforms and shows glare; tiles builds 49 tiles with correct per-tile positions, and the slide states and inert flags cycle; gallery-open reads--p10.5 at half-scroll and opens visibly; duotone tints at rest; no console errors; no horizontal scroll at 375px.🤖 Generated with Claude Code