content: import React from 'react'
  import Link from 'next/link'
  import Article from '../app/article'
  import Listing from '../app/listing'
  import Graph from '../app/graph'
  
  import * as easing from '../programs/basic/easing'
  import prog from '../build/prog/basic/easing'
  
  export const pagePath = 'easing_functions'
  export const pageTitle = 'Easing functions'
  
  export default class extends React.Component {
      render() {
          return (
              <Article path={pagePath} title={pageTitle}>
                  <header>
                      <h1>{pageTitle}</h1>
                      <p>Easing functions specify the rate of change of a parameter over time.</p>
                  </header>
  
                  <h3>Linear interpolation</h3>
                  <p>A degenerate case, same as <Link href="/linear_interpolation"><a>lerp</a></Link>.</p>
                  <Graph y={easing.linear} />
                  <Listing program={prog} region="linear" />
  
                  <h3>Quadratic easing</h3>
                  <p>Derived from <em>y = x²</em>.</p>
                  <div className="row">
                      <Graph y={easing.easeInQuad} />
                      <Graph y={easing.easeOutQuad} />
                      <Graph y={easing.easeInOutQuad} />
                  </div>
                  <Listing program={prog} region="quad" />
  
                  <h3>Cubic easing</h3>
                  <p>Derived from <em>y = x³</em>.</p>
                  <div className="row">
                      <Graph y={easing.easeInCubic} />
                      <Graph y={easing.easeOutCubic} />
                      <Graph y={easing.easeInOutCubic} />
                  </div>
                  <Listing program={prog} region="cubic" />
  
                  <h3>Sinusoidal easing</h3>
                  <p>Derived from <em>y = sin x</em>.</p>
                  <div className="row">
                      <Graph y={easing.easeInSine} />
                      <Graph y={easing.easeOutSine} />
                      <Graph y={easing.easeInOutSine} />
                  </div>
                  <Listing program={prog} region="sine" />
  
                  <h3>Utility functions</h3>
                  <p>The following helpers can be used in conjunction with an easing function.</p>
                  <Listing program={prog} region="util" />
              </Article>
          )
      }
  }
  