← All labs
Beautiful Photons
Beautiful Photons is a Rails photo-gallery engine with responsive focal-point cropping. Set a focal point on the image below and watch the same photo stay framed across every crop and aspect ratio.
Click the image to set the focal point
Hero 2:1
Card 4:3
Square 1:1
Mobile 9:16
How it's used
In a host app, a named photo renders at any aspect and the stored focal point keeps the subject in frame — desktop and mobile.
<%= beautiful_photons_photo("hero", aspect: "2:1", mobile_aspect: "9:16") %>Under the hood each crop is just object-fit: cover; object-position: focal_x% focal_y% — which is exactly what's updating live above.
Interested?
Leave your email and tell us what you're after.