Quartz Composer

From Mac Guides

Jump to: navigation, search


This tip requires
Mac OS X Tiger

Quartz Composer is an Xcode tool that allows for the creation of animations (and transitions) based off the Quartz Extreme rendering engine. "Programming" the animations is accomplished by "plugging in" various modules to various other modules to achieve a cumulative animation effect.



The Quartz Composer main window with a "Basic Composition", an example starting document
The Quartz Composer main window with a "Basic Composition", an example starting document

Quartz Composer has a large palette for moving around various functional blocks. To the left of the palette is a source list of all the blocks, as well as some canned clips, to use in the composition. Each block has outputs and, sometimes, inputs, which may be wired up to other blocks. For example, one block may be an Image Importer (in the "Generator" category) who's output, image, may be wired directly to the Billboard renderer. Additionally, the output of the Image Importer may be wired through a • Blur effect, before being painted by the Billboard.

QC Examples


Patches and Clips


Patches are the elemental building block of a compostion. Patches are organized into several categories.

Add controlling elements, such as the keyboard or mouse.
Add elements to the composition, such as fog.
Add visible items to the composition, such as a static image, or a plasma field.
Add functions to the composition to filter or alter an input, such as changing the case of a string.
Add number-generating functions, such as a counter, or even a boolean logic gate.
Add mathematically generated images to the composition, such as a cube or gradient.
Add a datasource, such as Audio, to the composition, and use it to control other blocks.
Add miscellaneous tools to the composition, such as a Frames-Per-Second display.
• Blur 
Add a "blur" effect to the composition, useful for blurring input images before they are displayed.
• Color Adjust 
Add some color corrective effects to an Image output.
• Color Effect 
Add some color modifying functions to an image output.
• Composite Operation 
Combine two inputs into one output
• Distortion Effect 
Add a distortion effect to an image output;
• Generator 
Additional visible elements, such as halos.
• Geometry Adjustment 
Add geometric functions to the composition, such as crop.
• Gradient 
Add a gradient to the composition. Useful for backgrounds.
• Halftone Effect 
Add a halftone effect.
• Sharpen 
Sharpen an image output
• Stylize 
Add a few "photoshop filter" effects to the composition, such as Pixellate.
• Tile Effect 
Add some tiling effect to an image output
• Transition 
Add various transitions to the compisition, such as the ever popular Dissolve.


Clips are prewired groups of blocks, that achieve a pre-designed effect. For example, iTunes' default visualizer appears to use a "Glowing Apple Logo" clip.

Cubic Background 
Blocks of rotating cubes, used as a backdrop
Discs Background 
Large swatches of slowly moving color, similar to the default Mac OS X desktop pattern
Glowing Apple Logo 
A white, glowing Apple logo
Gradient Background 
A color-cycling background gradient
Rotating Cube 
Just what you expect it to be.

To save a new animation as a reusable clip in the clip library, save the composition to ~/Library/Application Support/Apple/Developer Tools/Quartz Composer/Clips (for personal use) or /Library/Application Support/Apple/Developer Tools/Quartz Composer/Clips (for system-wide use)


The compositions created by Quartz Composer may be used as standalone animations, as screensavers, or part of an application. Furthermore, several existing applications make use of Quartz Composer compositions, such as the built in Mac OS X slideshow.

Here are a few examples of compositions used in applications, which may be modified via Quartz Composer

  • Slideshow: /System/Library/PrivateFrameworks/Slideshow.framework/Versions/A/Resources/SlideshowTransition.qtz
  • Photo Booth: /Applications/Photo Booth.app/Contents/Resources/Video.qtz


To use a Quartz Composer composition as a screensaver, save your composition to ~/Library/Screen Savers (for personal use) or /Library/Screen Savers (for system wide use). Access the Desktop & Screensaver Preference Pane to activate.


Compositions may also be saved as QuickTime movies, for use in websites and other non-Mac OS X applications. To save a composition as a Quicktime movie, open the composition in the QuickTime Player and select File->Export as Quicktime Movie...

QC in 3rd Party Applications

  • Noise Industries Make your quartz composer creations available as Visual Effects Plugins in Avid non linear editing systems.
  • iDive by Aquafadas Create striking animations using videos, images and text from your iDive catalog using Mosaic, iDive's Quartz-Composer-powered animation module.
  • iVisualize is an iTunes Plug-In that plays Quartz Compositions in iTunes.

See Also