<instant-photo>

<instant-photo> is a native Web Component that presents an image as if it’s a developing/developed instant photograph, and includes a set of styles to give it a decent appearance out of the box.

Usage Permalink ¶

You can begin using the <instant-photo> Web Component by including a <script> tag in your HTML, with the component itself wrapping a <img>:

<script type="module" src="instant-photo.js"></script>

<instant-photo>
	<img src="/image.jpg" alt="...">
</instant-photo>

There are also a handful of CSS variables that you can set which will override the default behaviour and appearance of the instant photos. This is useful if you want to set up some defaults to override all instant photos on your website:

:root {
	/* override the color of the color behind the image (for develop) */
	--instant-photo-background-color: rebeccapurple;

	/* override the color of the border */
	--instant-photo-border-color: red;

	/* override the duration of the developing photo animation */
	--instant-photo-develop-duration: 5s;

	/* override the delay before the developing photo animation */
	--instant-photo-develop-delay: 5s;
}

Further Reading Permalink ¶

You can check out the full documentation, source code, and demos on GitHub, as well as provide feedback and report bugs on GitHub:

https://github.com/chrisburnell/instant-photo