diff --git a/ChangeLog.md b/ChangeLog.md
--- a/ChangeLog.md
+++ b/ChangeLog.md
@@ -1,6 +1,12 @@
 # Revision history for reanimate
 
-## 0.4.2.0
+## 0.4.4.0
+
+## 0.4.3.0 -- 2020-08-29
+
+* Improve documentation.
+
+## 0.4.2.0 -- 2020-08-27
 
 * Web-viewer: Use GHCi to reload code, reducing latency by ~100x.
 * Improve caching for blender and povray.
diff --git a/reanimate.cabal b/reanimate.cabal
--- a/reanimate.cabal
+++ b/reanimate.cabal
@@ -3,7 +3,7 @@
 --  see http://haskell.org/cabal/users-guide/
 
 name:                reanimate
-version:             0.4.2.0
+version:             0.4.3.0
 -- synopsis:
 -- description:
 license:             PublicDomain
diff --git a/src/Reanimate/Animation.hs b/src/Reanimate/Animation.hs
--- a/src/Reanimate/Animation.hs
+++ b/src/Reanimate/Animation.hs
@@ -97,7 +97,7 @@
 --
 --   Example:
 --
---   > drawBox `seqA` drawCircle
+--   @'Reanimate.Builtin.Documentation.drawBox' `'seqA'` 'Reanimate.Builtin.Documentation.drawCircle'@
 --
 --   <<docs/gifs/doc_seqA.gif>>
 seqA :: Animation -> Animation -> Animation
@@ -114,7 +114,7 @@
 --
 --   Example:
 --
---   > drawBox `parA` adjustDuration (*2) drawCircle
+--   @'Reanimate.Builtin.Documentation.drawBox' `'parA'` 'adjustDuration' (*2) 'Reanimate.Builtin.Documentation.drawCircle'@
 --
 --   <<docs/gifs/doc_parA.gif>>
 parA :: Animation -> Animation -> Animation
@@ -133,7 +133,7 @@
 --
 --   Example:
 --
---   > drawBox `parLoopA` adjustDuration (*2) drawCircle
+--   @'Reanimate.Builtin.Documentation.drawBox' `'parLoopA'` 'adjustDuration' (*2) 'Reanimate.Builtin.Documentation.drawCircle'@
 --
 --   <<docs/gifs/doc_parLoopA.gif>>
 parLoopA :: Animation -> Animation -> Animation
@@ -152,7 +152,7 @@
 --
 --   Example:
 --
---   > drawBox `parLoopA` adjustDuration (*2) drawCircle
+--   @'Reanimate.Builtin.Documentation.drawBox' `'parLoopA'` 'adjustDuration' (*2) 'Reanimate.Builtin.Documentation.drawCircle'@
 --
 --   <<docs/gifs/doc_parDropA.gif>>
 parDropA :: Animation -> Animation -> Animation
@@ -170,7 +170,7 @@
 --
 --   Example:
 --
---   > pause 1 `seqA` drawProgress
+--   @'pause' 1 `'seqA'` 'Reanimate.Builtin.Documentation.drawProgress'@
 --
 --   <<docs/gifs/doc_pause.gif>>
 pause :: Duration -> Animation
@@ -181,7 +181,7 @@
 --
 --   Example:
 --
---   > drawBox `andThen` drawCircle
+--   @'Reanimate.Builtin.Documentation.drawBox' `'andThen'` 'Reanimate.Builtin.Documentation.drawCircle'@
 --
 --   <<docs/gifs/doc_andThen.gif>>
 andThen :: Animation -> Animation -> Animation
@@ -223,7 +223,7 @@
 --
 --   Example:
 --
---   > mapA (scale 0.5) drawCircle
+--   @'mapA' ('scale' 0.5) 'Reanimate.Builtin.Documentation.drawCircle'@
 --
 --   <<docs/gifs/doc_mapA.gif>>
 
@@ -234,7 +234,7 @@
 --
 --   Example:
 --
---   > pauseAtEnd 1 drawProgress
+--   @'pauseAtEnd' 1 'Reanimate.Builtin.Documentation.drawProgress'@
 --
 --   <<docs/gifs/doc_pauseAtEnd.gif>>
 pauseAtEnd :: Duration -> Animation -> Animation
@@ -244,7 +244,7 @@
 --
 --   Example:
 --
---   > pauseAtBeginning 1 drawProgress
+--   @'pauseAtBeginning' 1 'Reanimate.Builtin.Documentation.drawProgress'@
 --
 --   <<docs/gifs/doc_pauseAtBeginning.gif>>
 pauseAtBeginning :: Duration -> Animation -> Animation
@@ -255,7 +255,7 @@
 --
 --   Example:
 --
---   > pauseAround 1 1 drawProgress
+--   @'pauseAround' 1 1 'Reanimate.Builtin.Documentation.drawProgress'@
 --
 --   <<docs/gifs/doc_pauseAround.gif>>
 pauseAround :: Duration -> Duration -> Animation -> Animation
@@ -281,7 +281,7 @@
 --
 --   Example:
 --
---   > reverseA drawCircle
+--   @'reverseA' 'Reanimate.Builtin.Documentation.drawCircle'@
 --
 --   <<docs/gifs/doc_reverseA.gif>>
 reverseA :: Animation -> Animation
@@ -292,7 +292,7 @@
 --
 --   Example:
 --
---   > playThenReverseA drawCircle
+--   @'playThenReverseA' 'Reanimate.Builtin.Documentation.drawCircle'@
 --
 --   <<docs/gifs/doc_playThenReverseA.gif>>
 playThenReverseA :: Animation -> Animation
@@ -304,7 +304,7 @@
 --
 --   Example:
 --
---   > repeatA 1.5 drawCircle
+--   @'repeatA' 1.5 'Reanimate.Builtin.Documentation.drawCircle'@
 --
 --   <<docs/gifs/doc_repeatA.gif>>
 repeatA :: Double -> Animation -> Animation
@@ -325,7 +325,7 @@
 --
 --  Example:
 --
---  > addStatic (mkBackground "lightblue") drawCircle
+--  @'addStatic' ('mkBackground' "lightblue") 'Reanimate.Builtin.Documentation.drawCircle'@
 --
 --  <<docs/gifs/doc_addStatic.gif>>
 addStatic :: SVG -> Animation -> Animation
@@ -335,7 +335,7 @@
 --
 --   Example:
 --
---   > signalA (fromToS 0.25 0.75) drawCircle
+--   @'signalA' ('fromToS' 0.25 0.75) 'Reanimate.Builtin.Documentation.drawCircle'@
 --
 --   <<docs/gifs/doc_signalA.gif>>
 signalA :: Signal -> Animation -> Animation
diff --git a/src/Reanimate/Builtin/CirclePlot.hs b/src/Reanimate/Builtin/CirclePlot.hs
--- a/src/Reanimate/Builtin/CirclePlot.hs
+++ b/src/Reanimate/Builtin/CirclePlot.hs
@@ -21,8 +21,10 @@
 --
 --   Example:
 --
---   > circlePlot 500 $ \ang r ->
---   >   promotePixel $ toRGB8 $ uncurryRGB sRGB $ hsv (ang/pi*180) r 1
+-- @
+-- 'circlePlot' 500 $ \ang r ->
+--   'Codec.Picture.Types.promotePixel' $ toRGB8 $ uncurryRGB sRGB $ hsv (ang/pi*180) r 1
+-- @
 --
 --   <<docs/gifs/doc_circlePlot.gif>>
 circlePlot :: Int -- ^ Number of diagonal pixels. Only affects quality, not size.
diff --git a/src/Reanimate/Builtin/Flip.hs b/src/Reanimate/Builtin/Flip.hs
--- a/src/Reanimate/Builtin/Flip.hs
+++ b/src/Reanimate/Builtin/Flip.hs
@@ -1,7 +1,7 @@
+{-# LANGUAGE ApplicativeDo     #-}
 {-# LANGUAGE OverloadedStrings #-}
 {-# LANGUAGE QuasiQuotes       #-}
 {-# LANGUAGE RecordWildCards   #-}
-{-# LANGUAGE ApplicativeDo     #-}
 {- HLINT ignore -}
 {-|
 Copyright   : Written by David Himmelstrup
@@ -16,16 +16,17 @@
   , flipTransition
   ) where
 
-import           Reanimate.Animation
-import           Reanimate.Blender
-import           Reanimate.Raster
-import           Reanimate.Scene
-import           Reanimate.Ease
-import           Reanimate.Transition
-import           Reanimate.Svg.Constructors
+import           Reanimate.Animation        (Animation, duration, frameAt, setDuration)
+import           Reanimate.Blender          (blender)
+import           Reanimate.Ease             (fromToS, oscillateS)
+import           Reanimate.Raster           (svgAsPngFile)
+import           Reanimate.Scene            (Scene, Sprite, Var, fork, newSprite, newVar, scene,
+                                             spriteDuration, spriteT, tweenVar, unVar)
+import           Reanimate.Svg.Constructors (flipXAxis)
+import           Reanimate.Transition       (Transition)
 
-import           NeatInterpolation (text)
-import qualified Data.Text           as T
+import qualified Data.Text                  as T
+import           NeatInterpolation          (text)
 
 -- | Control structure with parameters for the blender script.
 data FlipSprite s = FlipSprite
@@ -62,7 +63,7 @@
       , fsWobble = rotX }
 
 flipTransitionOpts :: Double -> Double -> Double -> Transition
-flipTransitionOpts bend zoom wobble a b = sceneAnimation $ do
+flipTransitionOpts bend zoom wobble a b = scene $ do
     FlipSprite{..} <- flipSprite a b
     fork $ tweenVar fsZoom dur   $ \v -> fromToS v zoom . oscillateS
     fork $ tweenVar fsBend dur   $ \v -> fromToS v bend . oscillateS
diff --git a/src/Reanimate/Builtin/TernaryPlot.hs b/src/Reanimate/Builtin/TernaryPlot.hs
--- a/src/Reanimate/Builtin/TernaryPlot.hs
+++ b/src/Reanimate/Builtin/TernaryPlot.hs
@@ -38,11 +38,13 @@
 --
 --   Example:
 --
---   > ternaryPlot 100 $ \aCoord bCoord cCoord -> promotePixel $
---   >   let red   = round $ aCoord*255
---   >       green = round $ bCoord*255
---   >       blue  = round $ cCoord*255
---   >   in PixelRGB8 red green blue
+-- @
+-- 'ternaryPlot' 100 $ \\aCoord bCoord cCoord -> 'Codec.Picture.Types.promotePixel' $
+--   let red   = round $ aCoord*255
+--       green = round $ bCoord*255
+--       blue  = round $ cCoord*255
+--   in PixelRGB8 red green blue
+-- @
 --
 --   <<docs/gifs/doc_ternaryPlot.gif>>
 ternaryPlot :: Int -- ^ Pixels in the X-axis. More pixels => higher quality.
diff --git a/src/Reanimate/Ease.hs b/src/Reanimate/Ease.hs
--- a/src/Reanimate/Ease.hs
+++ b/src/Reanimate/Ease.hs
@@ -22,7 +22,9 @@
 --
 --   Example:
 --
---   > signalA (constantS 0.5) drawProgress
+-- @
+-- 'Reanimate.signalA' ('constantS' 0.5) 'Reanimate.Builtin.Documentation.drawProgress'
+-- @
 --
 --   <<docs/gifs/doc_constantS.gif>>
 constantS :: Double -> Signal
@@ -32,7 +34,9 @@
 --
 --   Example:
 --
---   > signalA (fromToS 0.8 0.2) drawProgress
+-- @
+-- 'Reanimate.signalA' ('fromToS' 0.8 0.2) 'Reanimate.Builtin.Documentation.drawProgress'
+-- @
 --
 --   <<docs/gifs/doc_fromToS.gif>>
 fromToS :: Double -> Double -> Signal
@@ -42,7 +46,9 @@
 --
 --   Example:
 --
---   > signalA reverseS drawProgress
+-- @
+-- 'Reanimate.signalA' 'reverseS' 'Reanimate.Builtin.Documentation.drawProgress'
+-- @
 --
 --   <<docs/gifs/doc_reverseS.gif>>
 reverseS :: Signal
@@ -52,7 +58,9 @@
 --
 --   Example:
 --
---   > signalA (curveS 2) drawProgress
+-- @
+-- 'Reanimate.signalA' ('curveS' 2) 'Reanimate.Builtin.Documentation.drawProgress'
+-- @
 --
 --   <<docs/gifs/doc_curveS.gif>>
 curveS :: Double -> Signal
@@ -65,7 +73,9 @@
 --
 --   Example:
 --
---   > signalA (powerS 2) drawProgress
+-- @
+-- 'Reanimate.signalA' ('powerS' 2) 'Reanimate.Builtin.Documentation.drawProgress'
+-- @
 --
 --   <<docs/gifs/doc_powerS.gif>>
 powerS :: Double -> Signal
@@ -75,7 +85,9 @@
 --
 --   Example:
 --
---   > signalA oscillateS drawProgress
+-- @
+-- 'Reanimate.signalA' 'oscillateS' 'Reanimate.Builtin.Documentation.drawProgress'
+-- @
 --
 --   <<docs/gifs/doc_oscillateS.gif>>
 oscillateS :: Signal
@@ -88,7 +100,9 @@
 --
 --   Example:
 --
---   > signalA (bellS 2) drawProgress
+-- @
+-- 'Reanimate.signalA' ('bellS' 2) 'Reanimate.Builtin.Documentation.drawProgress'
+-- @
 --
 --   <<docs/gifs/doc_bellS.gif>>
 bellS :: Double -> Signal
@@ -99,7 +113,9 @@
 --
 --   Example:
 --
---   > signalA (cubicBezierS (0.0, 0.8, 0.9, 1.0)) drawProgress
+-- @
+-- 'Reanimate.signalA' ('cubicBezierS' (0.0, 0.8, 0.9, 1.0)) 'Reanimate.Builtin.Documentation.drawProgress'
+-- @
 --   
 --   <<docs/gifs/doc_cubicBezierS.gif>>
 cubicBezierS :: (Double, Double, Double, Double) -> Signal
diff --git a/src/Reanimate/Math/Balloon.hs b/src/Reanimate/Math/Balloon.hs
--- a/src/Reanimate/Math/Balloon.hs
+++ b/src/Reanimate/Math/Balloon.hs
@@ -31,7 +31,9 @@
 --
 --   Example:
 --
---   > animate $ balloon (scale 8 $ center $ latex "X")
+-- @
+-- 'animate' $ 'balloon' ('scale' 8 $ 'center' $ 'Reanimate.LaTeX.latex' \"X\")
+-- @
 --
 --   <<docs/gifs/doc_balloon.gif>>
 balloon :: SVG -> (Double -> SVG)
diff --git a/src/Reanimate/Morph/Linear.hs b/src/Reanimate/Morph/Linear.hs
--- a/src/Reanimate/Morph/Linear.hs
+++ b/src/Reanimate/Morph/Linear.hs
@@ -25,11 +25,13 @@
 --
 --   Example:
 --
---   > playThenReverseA $ pauseAround 0.5 0.5 $ mkAnimation 3 $ \t ->
---   >   withStrokeLineJoin JoinRound $
---   >   let src = scale 8 $ center $ latex "X"
---   >       dst = scale 8 $ center $ latex "H"
---   >   in morph linear src dst t
+-- @
+-- 'Reanimate.playThenReverseA' $ 'Reanimate.pauseAround' 0.5 0.5 $ 'Reanimate.mkAnimation' 3 $ \\t ->
+--   'Reanimate.withStrokeLineJoin' 'Graphics.SvgTree.JoinRound' $
+--   let src = 'Reanimate.scale' 8 $ 'Reanimate.center' $ 'Reanimate.LaTeX.latex' \"X\"
+--       dst = 'Reanimate.scale' 8 $ 'Reanimate.center' $ 'Reanimate.LaTeX.latex' \"H\"
+--   in 'morph' 'linear' src dst t
+-- @
 --
 --   <<docs/gifs/doc_linear.gif>>
 linear :: Morph
@@ -44,11 +46,13 @@
 --
 --   Example:
 --
---   > playThenReverseA $ pauseAround 0.5 0.5 $ mkAnimation 3 $ \t ->
---   >   withStrokeLineJoin JoinRound $
---   >   let src = scale 8 $ center $ latex "X"
---   >       dst = scale 8 $ center $ latex "H"
---   >   in morph rawLinear src dst t
+-- @
+-- 'Reanimate.playThenReverseA' $ 'Reanimate.pauseAround' 0.5 0.5 $ 'Reanimate.mkAnimation' 3 $ \\t ->
+--   'Reanimate.withStrokeLineJoin' 'Graphics.SvgTree.JoinRound' $
+--   let src = 'Reanimate.scale' 8 $ 'Reanimate.center' $ 'Reanimate.LaTeX.latex' \"X\"
+--       dst = 'Reanimate.scale' 8 $ 'Reanimate.center' $ 'Reanimate.LaTeX.latex' \"H\"
+--   in 'morph' 'rawLinear' src dst t
+-- @
 --
 --   <<docs/gifs/doc_rawLinear.gif>>
 rawLinear :: Morph
diff --git a/src/Reanimate/Morph/Rotational.hs b/src/Reanimate/Morph/Rotational.hs
--- a/src/Reanimate/Morph/Rotational.hs
+++ b/src/Reanimate/Morph/Rotational.hs
@@ -29,11 +29,13 @@
 --
 --   Example:
 --
---   > playThenReverseA $ pauseAround 0.5 0.5 $ mkAnimation 3 $ \t ->
---   >   withStrokeLineJoin JoinRound $
---   >   let src = scale 8 $ center $ latex "X"
---   >       dst = scale 8 $ center $ latex "H"
---   >   in morph linear{morphTrajectory=rotationalTrajectory (0.5,0.5)} src dst t
+-- @
+-- 'Reanimate.playThenReverseA' $ 'Reanimate.pauseAround' 0.5 0.5 $ 'Reanimate.mkAnimation' 3 $ \\t ->
+--   'Reanimate.withStrokeLineJoin' 'Graphics.SvgTree.JoinRound' $
+--   let src = 'Reanimate.scale' 8 $ 'Reanimate.center' $ 'Reanimate.LaTeX.latex' \"X\"
+--       dst = 'Reanimate.scale' 8 $ 'Reanimate.center' $ 'Reanimate.LaTeX.latex' \"H\"
+--   in 'morph' 'Reanimate.Morph.Linear.linear'{'morphTrajectory'='rotationalTrajectory' (0.5,0.5)} src dst t
+-- @
 --
 --   <<docs/gifs/doc_rotationalTrajectory.gif>>
 rotationalTrajectory :: Origin -> Trajectory
diff --git a/src/Reanimate/Raster.hs b/src/Reanimate/Raster.hs
--- a/src/Reanimate/Raster.hs
+++ b/src/Reanimate/Raster.hs
@@ -71,7 +71,9 @@
 --
 --   Example:
 --
---   > mkImage screenWidth screenHeight "../data/haskell.svg"
+-- @
+-- 'mkImage' 'screenWidth' 'screenHeight' \"..\/data\/haskell.svg\"
+-- @
 --
 --   <<docs/gifs/doc_mkImage.gif>>
 mkImage
diff --git a/src/Reanimate/Render.hs b/src/Reanimate/Render.hs
--- a/src/Reanimate/Render.hs
+++ b/src/Reanimate/Render.hs
@@ -14,7 +14,7 @@
   ( render
   , renderSvgs
   , renderSnippets        -- :: Animation -> IO ()
-  , renderOneFrame
+  , renderLimitedFrames
   , Format(..)
   , Raster(..)
   , Width, Height, FPS
@@ -82,27 +82,35 @@
     hPutStrLn stderr msg
     exitWith (ExitFailure 1)
 
--- | Select a single frame that doesn't already exist in the output
---   folder and render it. If all frames have been rendered, print "Done".
-renderOneFrame :: FilePath -> Int -> Bool -> Int -> Animation -> IO ()
-renderOneFrame folder offset _prettyPrint rate ani =
-    worker (frameOrder rate frameCount)
+-- | Render as many frames as possible in 2 seconds. Limited to 20 frames.
+renderLimitedFrames :: FilePath -> Int -> Bool -> Int -> Animation -> IO ()
+renderLimitedFrames folder offset _prettyPrint rate ani = do
+    now <- getCurrentTime
+    worker (addUTCTime timeLimit now) frameLimit (frameOrder rate frameCount)
   where
-    worker [] = putStrLn "Done"
-    worker (x:xs) = do
-      let nth = (x+offset) `mod` frameCount
-          now = (duration ani / (fromIntegral frameCount - 1)) * fromIntegral nth
-          frame = frameAt (if frameCount <= 1 then 0 else now) ani
-          svg = renderSvg Nothing Nothing frame
-          path = folder </> show nth <.> "svg"
-          tmpPath = path <.> "tmp"
-      haveFile <- doesFileExist path
-      if haveFile
-        then worker xs
+    timeLimit = 2
+    frameLimit = 20 :: Int
+    worker _ 0 _ = return ()
+    worker _ _ [] = putStrLn "Done"
+    worker localTimeLimit l (x:xs) = do
+      curTime <- getCurrentTime
+      if curTime > localTimeLimit
+        then return ()
         else do
-          writeFile tmpPath svg
-          renameOrCopyFile tmpPath path
-          print nth
+          let nth = (x+offset) `mod` frameCount
+              now = (duration ani / (fromIntegral frameCount - 1)) * fromIntegral nth
+              frame = frameAt (if frameCount <= 1 then 0 else now) ani
+              svg = renderSvg Nothing Nothing frame
+              path = folder </> show nth <.> "svg"
+              tmpPath = path <.> "tmp"
+          haveFile <- doesFileExist path
+          if haveFile
+            then worker localTimeLimit l xs
+            else do
+              writeFile tmpPath svg
+              renameOrCopyFile tmpPath path
+              print nth
+              worker localTimeLimit (l-1) xs
     frameCount = round (duration ani * fromIntegral rate) :: Int
 
 -- XXX: Merge with 'renderSvgs'
diff --git a/src/Reanimate/Scene.hs b/src/Reanimate/Scene.hs
--- a/src/Reanimate/Scene.hs
+++ b/src/Reanimate/Scene.hs
@@ -219,8 +219,10 @@
 --
 --   Example:
 --
---   > do fork $ play drawBox
---   >    play drawCircle
+-- @
+-- do 'fork' $ 'play' 'Reanimate.Builtin.Documentation.drawBox'
+--    'play' 'Reanimate.Builtin.Documentation.drawCircle'
+-- @
 --
 --   <<docs/gifs/doc_fork.gif>>
 fork :: Scene s a -> Scene s a
@@ -233,8 +235,10 @@
 --
 --   Example:
 --
---   > do play drawBox
---   >    play drawCircle
+-- @
+-- do 'play' 'Reanimate.Builtin.Documentation.drawBox'
+--    'play' 'Reanimate.Builtin.Documentation.drawCircle'
+-- @
 --
 --   <<docs/gifs/doc_play.gif>>
 play :: Animation -> Scene s ()
@@ -244,9 +248,11 @@
 --
 --   Example:
 --
---   > do now <- play drawCircle *> queryNow
---   >    play $ staticFrame 1 $ scale 2 $ withStrokeWidth 0.05 $
---   >      mkText $ "Now=" <> T.pack (show now)
+-- @
+-- do now \<- 'play' 'Reanimate.Builtin.Documentation.drawCircle' *\> 'queryNow'
+--    'play' $ 'staticFrame' 1 $ 'scale' 2 $ 'withStrokeWidth' 0.05 $
+--      'mkText' $ "Now=" <> T.pack (show now)
+-- @
 --
 --   <<docs/gifs/doc_queryNow.gif>>
 queryNow :: Scene s Time
@@ -256,9 +262,11 @@
 --
 --   Example:
 --
---   > do fork $ play drawBox
---   >    wait 1
---   >    play drawCircle
+-- @
+-- do 'fork' $ 'play' 'Reanimate.Builtin.Documentation.drawBox'
+--    'wait' 1
+--    'play' 'Reanimate.Builtin.Documentation.drawCircle'
+-- @
 --
 --   <<docs/gifs/doc_wait.gif>>
 wait :: Duration -> Scene s ()
@@ -274,8 +282,10 @@
 --
 --   Example:
 --
---   > do waitOn $ fork $ play drawBox
---   >    play drawCircle
+-- @
+-- do 'waitOn' $ 'fork' $ 'play' 'Reanimate.Builtin.Documentation.drawBox'
+--    'play' 'Reanimate.Builtin.Documentation.drawCircle'
+-- @
 --
 --   <<docs/gifs/doc_waitOn.gif>>
 waitOn :: Scene s a -> Scene s a
@@ -311,9 +321,11 @@
 --   Variables always have a defined value even if they are read at a timestamp that is
 --   earlier than when the variable was created. For example:
 --
---   > do v <- fork (wait 10 >> newVar 0) -- Create a variable at timestamp '10'.
---   >    readVar v                       -- Read the variable at timestamp '0'.
---   >                                    -- The value of the variable will be '0'.
+-- @
+-- do v \<- 'fork' ('wait' 10 \>\> 'newVar' 0) -- Create a variable at timestamp '10'.
+--    'readVar' v                       -- Read the variable at timestamp '0'.
+--                                    -- The value of the variable will be '0'.
+-- @
 newVar :: a -> Scene s (Var s a)
 newVar def = Var <$> liftST (newSTRef (const def))
 
@@ -325,11 +337,13 @@
 --
 --   Example:
 --
---   > do v <- newVar 0
---   >    newSprite $ mkCircle <$> unVar v
---   >    writeVar v 1; wait 1
---   >    writeVar v 2; wait 1
---   >    writeVar v 3; wait 1
+-- @
+-- do v \<- 'newVar' 0
+--    'newSprite' $ 'mkCircle' \<$\> 'unVar' v
+--    'writeVar' v 1; 'wait' 1
+--    'writeVar' v 2; 'wait' 1
+--    'writeVar' v 3; 'wait' 1
+-- @
 --
 --   <<docs/gifs/doc_writeVar.gif>>
 writeVar :: Var s a -> a -> Scene s ()
@@ -367,8 +381,10 @@
 --
 --   Example:
 --
---   > do var <- simpleVar mkCircle 0
---   >    tweenVar var 2 $ \val -> fromToS val (screenHeight/2)
+-- @
+-- do var \<- 'simpleVar' 'mkCircle' 0
+--    'tweenVar' var 2 $ \val -> 'fromToS' val ('Reanimate.Constants.screenHeight'/2)
+-- @
 --
 --   <<docs/gifs/doc_simpleVar.gif>>
 simpleVar :: (a -> SVG) -> a -> Scene s (Var s a)
@@ -407,10 +423,12 @@
 --
 --   Example:
 --
---   > do v <- newVar 0
---   >    newSprite $ mkCircle <$> unVar v
---   >    tweenVar v 1 $ \val -> fromToS val 3
---   >    tweenVar v 1 $ \val -> fromToS val 0
+-- @
+-- do v \<- 'newVar' 0
+--    'newSprite' $ 'mkCircle' \<$\> 'unVar' v
+--    'tweenVar' v 1 $ \val -> 'fromToS' val 3
+--    'tweenVar' v 1 $ \val -> 'fromToS' val 0
+-- @
 --
 --   <<docs/gifs/doc_unVar.gif>>
 unVar :: Var s a -> Frame s a
@@ -432,8 +450,10 @@
 --
 --   Example:
 --
---   > do newSprite $ mkCircle <$> spriteT -- Circle sprite where radius=time.
---   >    wait 2
+-- @
+-- do 'newSprite' $ 'mkCircle' \<$\> 'spriteT' -- Circle sprite where radius=time.
+--    'wait' 2
+-- @
 --
 --   <<docs/gifs/doc_newSprite.gif>>
 newSprite :: Frame s SVG -> Scene s (Sprite s)
@@ -474,9 +494,11 @@
 --
 --   Example:
 --
---   > do fork $ newSpriteA drawCircle
---   >    play drawBox
---   >    play $ reverseA drawBox
+-- @
+-- do 'fork' $ 'newSpriteA' 'Reanimate.Builtin.Documentation.drawCircle'
+--    'play' 'Reanimate.Builtin.Documentation.drawBox'
+--    'play' $ 'reverseA' 'Reanimate.Builtin.Documentation.drawBox'
+-- @
 --
 --   <<docs/gifs/doc_newSpriteA.gif>>
 newSpriteA :: Animation -> Scene s (Sprite s)
@@ -487,9 +509,11 @@
 --
 --   Example:
 --
---   > do fork $ newSpriteA' SyncFreeze drawCircle
---   >    play drawBox
---   >    play $ reverseA drawBox
+-- @
+-- do 'fork' $ 'newSpriteA'' 'SyncFreeze' 'Reanimate.Builtin.Documentation.drawCircle'
+--    'play' 'Reanimate.Builtin.Documentation.drawBox'
+--    'play' $ 'reverseA' 'Reanimate.Builtin.Documentation.drawBox'
+-- @
 --
 --   <<docs/gifs/doc_newSpriteA'.gif>>
 newSpriteA' :: Sync -> Animation -> Scene s (Sprite s)
@@ -501,8 +525,10 @@
 --
 --   Example:
 --
---   > do newSpriteSVG $ mkBackground "lightblue"
---   >    play drawCircle
+-- @
+-- do 'newSpriteSVG' $ 'mkBackground' "lightblue"
+--    'play' 'Reanimate.Builtin.Documentation.drawCircle'
+-- @
 --
 --   <<docs/gifs/doc_newSpriteSVG.gif>>
 newSpriteSVG :: SVG -> Scene s (Sprite s)
@@ -518,10 +544,12 @@
 --
 --   Example:
 --
---   > do s <- fork $ newSpriteA drawBox
---   >    v <- newVar 0
---   >    applyVar v s rotate
---   >    tweenVar v 2 $ \val -> fromToS val 90
+-- @
+-- do s \<- 'fork' $ 'newSpriteA' 'Reanimate.Builtin.Documentation.drawBox'
+--    v \<- 'newVar' 0
+--    'applyVar' v s 'rotate'
+--    'tweenVar' v 2 $ \val -> 'fromToS' val 90
+-- @
 --
 --   <<docs/gifs/doc_applyVar.gif>>
 applyVar :: Var s a -> Sprite s -> (a -> SVG -> SVG) -> Scene s ()
@@ -534,9 +562,11 @@
 --
 --   Example:
 --
---   > do s <- newSpriteSVG $ withFillOpacity 1 $ mkCircle 1
---   >    fork $ wait 1 >> destroySprite s
---   >    play drawBox
+-- @
+-- do s <- 'newSpriteSVG' $ 'withFillOpacity' 1 $ 'mkCircle' 1
+--    'fork' $ 'wait' 1 \>\> 'destroySprite' s
+--    'play' 'Reanimate.Builtin.Documentation.drawBox'
+-- @
 --
 --   <<docs/gifs/doc_destroySprite.gif>>
 destroySprite :: Sprite s -> Scene s ()
@@ -560,9 +590,11 @@
 --
 --   Example:
 --
---   > do s <- fork $ newSpriteA drawCircle
---   >    wait 1
---   >    spriteMap s flipYAxis
+-- @
+-- do s \<- 'fork' $ 'newSpriteA' 'Reanimate.Builtin.Documentation.drawCircle'
+--    'wait' 1
+--    'spriteMap' s 'flipYAxis'
+-- @
 --
 --   <<docs/gifs/doc_spriteMap.gif>>
 spriteMap :: Sprite s -> (SVG -> SVG) -> Scene s ()
@@ -577,8 +609,10 @@
 --
 --   Example:
 --
---   > do s <- fork $ newSpriteA drawCircle
---   >    spriteTween s 1 $ \val -> translate (screenWidth*0.3*val) 0
+-- @
+-- do s \<- 'fork' $ 'newSpriteA' 'Reanimate.Builtin.Documentation.drawCircle'
+--    'spriteTween' s 1 $ \val -> 'translate' ('Reanimate.Constants.screenWidth'*0.3*val) 0
+-- @
 --
 --   <<docs/gifs/doc_spriteTween.gif>>
 spriteTween :: Sprite s -> Duration -> (Double -> SVG -> SVG) -> Scene s ()
@@ -598,9 +632,11 @@
 --
 --   Example:
 --
---   > do s <- fork $ newSpriteA drawBox
---   >    v <- spriteVar s 0 rotate
---   >    tweenVar v 2 $ \val -> fromToS val 90
+-- @
+-- do s \<- 'fork' $ 'newSpriteA' 'Reanimate.Builtin.Documentation.drawBox'
+--    v \<- 'spriteVar' s 0 'rotate'
+--    'tweenVar' v 2 $ \val -> 'fromToS' val 90
+-- @
 --
 --   <<docs/gifs/doc_spriteVar.gif>>
 spriteVar :: Sprite s -> a -> (a -> SVG -> SVG) -> Scene s (Var s a)
@@ -613,9 +649,11 @@
 --
 --   Example:
 --
---   > do s <- fork $ newSpriteA drawCircle
---   >    spriteE s $ overBeginning 1 fadeInE
---   >    spriteE s $ overEnding 0.5 fadeOutE
+-- @
+-- do s <- 'fork' $ 'newSpriteA' 'Reanimate.Builtin.Documentation.drawCircle'
+--    'spriteE' s $ 'overBeginning' 1 'fadeInE'
+--    'spriteE' s $ 'overEnding' 0.5 'fadeOutE'
+-- @
 --
 --   <<docs/gifs/doc_spriteE.gif>>
 spriteE :: Sprite s -> Effect -> Scene s ()
@@ -634,11 +672,13 @@
 --
 --   Example:
 --
---   > do s1 <- newSpriteSVG $ withFillOpacity 1 $ withFillColor "blue" $ mkCircle 3
---   >    newSpriteSVG $ withFillOpacity 1 $ withFillColor "red" $ mkRect 8 3
---   >    wait 1
---   >    spriteZ s1 1
---   >    wait 1
+-- @
+-- do s1 \<- 'newSpriteSVG' $ 'withFillOpacity' 1 $ 'withFillColor' "blue" $ 'mkCircle' 3
+--    'newSpriteSVG' $ 'withFillOpacity' 1 $ 'withFillColor' "red" $ 'mkRect' 8 3
+--    'wait' 1
+--    'spriteZ' s1 1
+--    'wait' 1
+-- @
 --
 --   <<docs/gifs/doc_spriteZ.gif>>
 spriteZ :: Sprite s -> ZIndex -> Scene s ()
@@ -656,16 +696,18 @@
 --
 --   Example:
 --
---   > do -- the rect lives through the entire 3s animation
---   >    newSpriteSVG_ $ translate (-3) 0 $ mkRect 4 4
---   >    wait 1
---   >    spriteScope $ do
---   >      -- the circle only lives for 1 second.
---   >      local <- newSpriteSVG $ translate 3 0 $ mkCircle 2
---   >      spriteE local $ overBeginning 0.3 fadeInE
---   >      spriteE local $ overEnding 0.3 fadeOutE
---   >      wait 1
---   >    wait 1
+-- @
+-- do -- the rect lives through the entire 3s animation
+--    'newSpriteSVG_' $ 'translate' (-3) 0 $ 'mkRect' 4 4
+--    'wait' 1
+--    'spriteScope' $ do
+--      -- the circle only lives for 1 second.
+--      local \<- 'newSpriteSVG' $ 'translate' 3 0 $ 'mkCircle' 2
+--      'spriteE' local $ 'overBeginning' 0.3 'fadeInE'
+--      'spriteE' local $ 'overEnding' 0.3 'fadeOutE'
+--      'wait' 1
+--    'wait' 1
+-- @
 --
 --   <<docs/gifs/doc_spriteScope.gif>>
 spriteScope :: Scene s a -> Scene s a
@@ -1102,14 +1144,16 @@
 --
 --   Example
 --
---   > do cam <- newObject Camera
---   >    circ <- newObject $ Circle 2
---   >    oModifyS circ $
---   >      oContext .= withFillOpacity 1 . withFillColor "blue"
---   >    oShow circ
---   >    cameraAttach cam circ
---   >    cameraZoom cam 1 2
---   >    cameraZoom cam 1 1
+-- @
+-- do cam \<- 'newObject' 'Camera'
+--    circ \<- 'newObject' $ 'Circle' 2
+--    'oModifyS' circ $
+--      'oContext' .= 'withFillOpacity' 1 . 'withFillColor' "blue"
+--    'oShow' circ
+--    'cameraAttach' cam circ
+--    'cameraZoom' cam 1 2
+--    'cameraZoom' cam 1 1
+-- @
 --
 --   <<docs/gifs/doc_cameraAttach.gif>>
 cameraAttach :: Object s Camera -> Object s a -> Scene s ()
@@ -1129,19 +1173,21 @@
 --
 --   Example
 --
---   > do cam <- newObject Camera
---   >    circ <- newObject $ Circle 2; oShow circ
---   >    oModify circ $ oTranslate .~ (-3,0)
---   >    box <- newObject $ Rectangle 4 4; oShow box
---   >    oModify box $ oTranslate .~ (3,0)
---   >    cameraAttach cam circ
---   >    cameraAttach cam box
---   >    cameraFocus cam (-3,0)
---   >    cameraZoom cam 2 2      -- Zoom in
---   >    cameraZoom cam 2 1      -- Zoom out
---   >    cameraFocus cam (3,0)
---   >    cameraZoom cam 2 2      -- Zoom in
---   >    cameraZoom cam 2 1      -- Zoom out
+-- @
+-- do cam \<- 'newObject' 'Camera'
+--    circ \<- 'newObject' $ 'Circle' 2; 'oShow' circ
+--    'oModify' circ $ 'oTranslate' .~ (-3,0)
+--    box \<- 'newObject' $ 'Rectangle' 4 4; 'oShow' box
+--    'oModify' box $ 'oTranslate' .~ (3,0)
+--    'cameraAttach' cam circ
+--    'cameraAttach' cam box
+--    'cameraFocus' cam (-3,0)
+--    'cameraZoom' cam 2 2      -- Zoom in
+--    'cameraZoom' cam 2 1      -- Zoom out
+--    'cameraFocus' cam (3,0)
+--    'cameraZoom' cam 2 2      -- Zoom in
+--    'cameraZoom' cam 2 1      -- Zoom out
+-- @
 --
 --   <<docs/gifs/doc_cameraFocus.gif>>
 cameraFocus :: Object s Camera -> (Double, Double) -> Scene s ()
diff --git a/src/Reanimate/Svg/Constructors.hs b/src/Reanimate/Svg/Constructors.hs
--- a/src/Reanimate/Svg/Constructors.hs
+++ b/src/Reanimate/Svg/Constructors.hs
@@ -347,7 +347,9 @@
 --
 --   Example:
 --
---   > animate $ const $ mkBackground "yellow"
+-- @
+-- 'Reanimate.animate' $ 'const' $ 'mkBackground' "yellow"
+-- @
 --
 --   <<docs/gifs/doc_mkBackground.gif>>
 mkBackground :: String -> Tree
@@ -382,7 +384,9 @@
 --
 --   Example:
 --
---   > mkAnimation 2 $ \t -> scale 2 $ withStrokeWidth 0.05 $ mkText (T.take (round $ t*15) "text")
+-- @
+-- 'Reanimate.mkAnimation' 2 $ \\t -> 'scale' 2 $ 'withStrokeWidth' 0.05 $ 'mkText' (T.take (round $ t*15) "text")
+-- @
 --
 --   <<docs/gifs/doc_mkText.gif>>
 mkText :: T.Text -> Tree
@@ -405,7 +409,9 @@
 --
 --   Example:
 --
---   > withViewBox (0,0,1,1) $ mkBackground "yellow"
+-- @
+-- 'withViewBox' (0,0,1,1) $ 'mkBackground' "yellow"
+-- @
 --
 --   <<docs/gifs/doc_withViewBox.gif>>
 withViewBox :: (Double, Double, Double, Double) -> Tree -> Tree
diff --git a/src/Reanimate/Transition.hs b/src/Reanimate/Transition.hs
--- a/src/Reanimate/Transition.hs
+++ b/src/Reanimate/Transition.hs
@@ -35,7 +35,9 @@
 --
 --   Example:
 --
---   > overlapT 0.5 fadeT drawBox drawCircle
+-- @
+-- 'overlapT' 0.5 'fadeT' 'Reanimate.Builtin.Documentation.drawBox' 'Reanimate.Builtin.Documentation.drawCircle'
+-- @
 --
 --   <<docs/gifs/doc_overlapT.gif>>
 overlapT :: Double -> Transition -> Transition
@@ -58,7 +60,9 @@
 --
 --   Example:
 --
---   > chainT (overlapT 0.5 fadeT) [drawBox, drawCircle, drawProgress]
+-- @
+-- 'chainT' ('overlapT' 0.5 'fadeT') ['Reanimate.Builtin.Documentation.drawBox', 'Reanimate.Builtin.Documentation.drawCircle', 'Reanimate.Builtin.Documentation.drawProgress']
+-- @
 --
 --   <<docs/gifs/doc_chainT.gif>>
 chainT :: Transition -> [Animation] -> Animation
@@ -69,7 +73,9 @@
 --
 --   Example:
 --
---   > drawBox `fadeT` drawCircle
+-- @
+-- 'Reanimate.Builtin.Documentation.drawBox' `'fadeT'` 'Reanimate.Builtin.Documentation.drawCircle'
+-- @
 --
 --   <<docs/gifs/doc_fadeT.gif>>
 fadeT :: Transition
