Patisserie

A front-end component library developed by Multiple States.

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

FilenameDescription
continuous-bleeding-marker.htmlMake a marker that will bleed when you hold it in one spot using paper.js
continuous-scroll.phpContinuous scroll
css-transition-on-scroll.htmlAnimate elements in the DOM when scrolling using CSS transitions.
draggable.htmlDrag and drop images
draw-a-line.phpClick to draw a line
evade-mouse.htmlMake an object evade the mouse using paper.js
fading-image-on-scroll.phpFade though a series of images on scrolling the page
fading-slideshow-on-mousedown.htmlFading slideshow activated on mousedown
flip-book.phpAn animating gif on scroll. Done through fixed backgrounds
full-height-slow-slide.htmlA Slow Slider with full height images that speeds up when clicked.
growing-brush.htmlMake a brush that grows as you drag it using paper.js
image-clipped-to-text.htmlFill a letter with an image.
image-loaded.htmlReplaces a low resolution image with a high resolution one once it has loaded
keyboard-trigger.phpPlay a sound on pressing the left arrow key.
letter-rotation.htmlRotate the letters of three phrases of the same length at a regular interval. Uses jQuery.
pan-a-large-image-via-mousemove.htmlPan a large image via mouse movements
random-flicking-colour.htmlA random flicking colour background. 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.
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.
random-image-layout.phpA layout that takes a folder of images and randomises its order, their sizes and their margins. Uses jQuery.
rapid-flicking-bg-images.htmlA rapidly flicking background image.
rotating-cube.htmlA rotating cube made using the webGL library, three.js
sheering-image.htmlAn image that will sheer as you hover it. Made using css 3D transforms.
sound-on-mousedown.htmlPlay a sound on mousedown
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