Patisserie (Experiments)

A front-end component library developed by Multiple States.

Developers please read the project readme file and follow the template provided for your components.

Filename (ordered by date modified)Description
3d-scrolling.htmlOn scroll move through a 3d environment of images
image-mask.phpLots of circle image masks
perspective.htmlAdd transform styles to text based on device orientation or mouse position
image-mask-rotation.phpImage masking and background image rotation on scroll
instagram-feed.htmlAn Instagram feed using instafeed.js with a load more button
onmousemove-change-image.phpOn mouse move go to next image in sequence.
random-image-layout.phpA layout that takes a folder of images and randomises its order, their sizes and their margins. Uses jQuery.
speech-detection-unsplash-api.phpUtilising chrome's built in speech recognition and Unsplash API.
css-transition-on-scroll.htmlAnimate elements in the DOM when scrolling using CSS transitions.
glfx-js.htmlAdds a filter to an image with JS
lot-of-sliders.phpS**t this page has a lot of sliders.
random-image-layout-within-viewport.phpA layout that takes a folder of images and spits them onto the page with random sizes and positions within the viewport. Uses jQuery.
flip-book.phpAn animating gif on scroll. Done through fixed backgrounds
continuous-scroll.phpContinuous scroll
fading-image-on-scroll.phpFade though a series of images on scrolling the page
pan-a-large-image-via-mousemove.htmlPan a large image via mouse movements
sound-on-mousedown.htmlPlay a sound on mousedown
fading-slideshow-on-mousedown.htmlFading slideshow activated on mousedown
image-loaded.htmlReplaces a low resolution image with a high resolution one once it has loaded
draggable.htmlDrag and drop images
rotating-cube.htmlA rotating cube made using the webGL library, three.js
letter-rotation.htmlRotate the letters of three phrases of the same length at a regular interval. Uses jQuery.
random-image-layout-with-random-blur.phpA layout that takes a folder of images and randomises its order, their sizes, their margins and their blur. Uses jQuery.
rapid-flicking-bg-images.htmlA rapidly flicking background image.
sheering-image.htmlAn image that will sheer as you hover it. Made using css 3D transforms.
full-height-slow-slide.htmlA Slow Slider with full height images that speeds up when clicked.
image-clipped-to-text.htmlFill a letter with an image.
random-flicking-colour.htmlA random flicking colour background. Uses jQuery.
speed-sensitive-marker.htmlMake a marker that will be thinner when moved with speed using paper.js
spiky-brush.htmlMake a weird spiky brush using paper.js
continuous-bleeding-marker.htmlMake a marker that will bleed when you hold it in one spot using paper.js
evade-mouse.htmlMake an object evade the mouse using paper.js
growing-brush.htmlMake a brush that grows as you drag it using paper.js