'/%3e%3c!--%20Motion%20trails%20--%3e%3crect%20x='14'%20y='7'%20width='12'%20height='2'%20rx='1'%20fill='white'%20opacity='.2'/%3e%3crect%20x='12'%20y='12'%20width='16'%20height='2'%20rx='1'%20fill='white'%20opacity='.35'/%3e%3crect%20x='10'%20y='17'%20width='20'%20height='2.5'%20rx='1.25'%20fill='white'%20opacity='.5'/%3e%3c!--%20Bold%20chevron%20down%20--%3e%3cpath%20d='M10%2024%20L20%2034%20L30%2024'%20stroke='white'%20stroke-width='3.5'%20stroke-linecap='round'%20stroke-linejoin='round'%20fill='none'/%3e%3c/svg%3e)
Recipes
The guides and API pages explain one piece at a time. A recipe starts from something you want to ship and puts the pieces together: a live demo to try first, the full code for your framework, and why each part is there.
Infinite FeedLoad the next page as the viewer nears the end, with loading and error slides, cancelled requests, and preloaded media.Grid to PlayerOpen the full-screen reel player from a thumbnail grid and bring the viewer back to the last item they watched.Gallery SlideshowPlay a photo gallery as a slideshow in the lightbox and download the original file of each photo.Stories TrayOpen the stories player from a row of rings and remember what the viewer has already seen, across reloads.
Every demo runs the React code shown beside it. The Vue and Angular versions do the same thing with their own bindings.