css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
  <div class="row">
    <div class="jumbotron text-center">
      <h1>Tycho</h1>
      <p>A musical project by Scott Hansen</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <img id="epoch-artwork" class="img-responsive" src="https://cdn.shopify.com/s/files/1/0023/2122/products/GI-279_3000x300_29cc16e7-2f22-49a2-aebe-d35f8d2725eb_1024x1024.jpg?v=1480071948" alt="The cover artwork for the album 'Epoch' by Tycho.">
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <p>Tycho is an American ambient music project led by Scott Hansen (born 1977) as primary composer, songwriter and producer. Hailing from San Francisco, California, he is known as ISO50 for his photographic and design works.</p>
      <p>His music is a combination of downtempo vintage-style synthesizers and ambient melodies. The style of his music sounds very organic, typically incorporating clips of the human element into his songs (e.g. weather broadcasts, simple talking, or even breathing).</p>
      <p>His song "Dictaphone's Lament" was used as the track on a music video entitled "Live Life to the Fullest", which was made by and featured on the action cartoon block Toonami. His song "Cascade" (originally made for an Adult Swim and Ghostly International compilation called Ghostly Swim) was played during the final moments of the original 11-year run of Toonami in 2008.</p>
      <p>As of December 2014, Tycho is signed to and has released under Ghostly International, but has also released music on Merck Records and Gammaphone Records. On December 6, 2016 Tycho's fourth album, Epoch, received a nomination for Best Dance/Electronic Album in the 2017 Grammy Awards.</p>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <h1 class="text-center">Sound</h1>
      <p>Hansen's music project Tycho is influenced by and has been compared to artists such as DJ Shadow, Ulrich Schnauss and Boards of Canada. His music captures the sound of lo-fi analog media while remaining both progressive and futuristic in composition and style.</p>
      <p>Themes of nostalgia, longing, childhood and the natural world are interspersed throughout Tycho's work. Brief interludes or vignettes also feature in his earlier work. In Past Is Prologue, Hansen selected and included excerpts from broadcasts accompanied by atmospherics to capture a specific moment or mood. Overall, the mixture of electronic synths, live instrumentation, and old school sound clips creates a very relatable, organic sound.</p>
      <p>Until the release of the album Dive, Hansen worked as a solo artist and used the digital audio workstation, Cakewalk Sonar, to work with analog, virtual analog hardware, digital hardware and VSTI synthesizers as well as samples derived from live instrumentation, played by Hansen himself. While creating the album, he switched over to REAPER, a more dynamic program which he credits with allowing him to finish Dive. The album tour had a live band for the first time, hybridizing the electronic music experience with the dynamic energy of a performance featuring live instrumentation.</p>
      <p>After touring, Hansen decided to permanently open up the solo project, and work both on tour and in the studio alongside two other band members, Zac Brown on bass guitar and guitar and Rory O'Connor on drums. When performing, all the guitars are live, played either by Hansen or Brown. Bass guitar is also always live, with the exception of the song "Hours".</p>
      <p>Drums are played live by O'Connor, and lead synthesizers are also live. Hansen often plays guitar while triggering samples with his foot. His goal is to find the balance between the fluid nature of a live show with artists playing physical instruments and the precision and ability to stay true to the album of electronic music.</p>
    </div>
  </div>
  <br/>
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <div class="col-md-6">
        <h1 class="text-center">Live Members</h1>
        <ul class="text-center"><br/>
          <li><b>Scott Hansen</b> – synthesizers, guitar, bass guitar, visuals, programming</li>
          <li><b>Zac Brown</b> – bass guitar, guitar</li>
          <li><b>Rory O'Connor</b> – drums</li>
          <li><b>Billy Kim</b> – bass guitar, keyboards, synthesizers</li>
        </ul>
      </div>
      <div class="col-md-6">
        <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/6/61/Tycho_performing_at_Hopscotch_Music_Festival_2015.jpg" alt="A photograph of Tycho performing live">
      </div>
    </div>
  </div><br/>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <h1 class="text-center">Discography</h1>
      <h3>Studio Albums</h3>
      <table class="table table-responsive">
        <thead>
          <tr>
            <th>Title</th>
            <th>Year</th>
            <th>Record Label</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Past Is Prologue</td>
            <td>2006</td>
            <td>Merck Records</td>
          </tr>
          <tr>
            <td>Dive</td>
            <td>2011</td>
            <td>Ghostly International</td>
          </tr>
          <tr>
            <td>Awake</td>
            <td>2014</td>
            <td>Ghostly International</td>
          </tr>
          <tr>
            <td>Epoch</td>
            <td>2016</td>
            <td>Ghostly International</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <h3>EPs</h3>
      <table class="table table-responsive">
        <thead>
          <tr>
            <th>Title</th>
            <th>Year</th>
            <th>Record Label</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>The Science of Patterns</td>
            <td>2002</td>
            <td>Indepedent</td>
          </tr>
          <tr>
            <td>Fragments / Ascension</td>
            <td>2013</td>
            <td>Ghostly International</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <h3>Singles</h3>
      <table class="table table-responsive">
        <thead>
          <tr>
            <th>Title</th>
            <th>Year</th>
            <th>Record Label</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Past Is Prologue 12"</td>
            <td>2006</td>
            <td>Merck Records</td>
          </tr>
          <tr>
            <td>The Daydream / The Disconnect</td>
            <td>2007</td>
            <td>Ghostly International</td>
          </tr>
          <tr>
            <td>Adrift / From Home</td>
            <td>2008</td>
            <td>Ghostly International</td>
          </tr>
          <tr>
            <td>Coastal Brake</td>
            <td>2009</td>
            <td>Ghostly International</td>
          </tr>
          <tr>
            <td>Hours</td>
            <td>2011</td>
            <td>Ghostly International</td>
          </tr>
          <tr>
            <td>Dive (Radio Edit)</td>
            <td>2011</td>
            <td>Ghostly International</td>
          </tr>
          <tr>
            <td>Dive</td>
            <td>2012</td>
            <td>Ghostly International</td>
          </tr>
          <tr>
            <td>Awake</td>
            <td>2013</td>
            <td>Ghostly International</td>
          </tr>
          <tr>
            <td>Montana</td>
            <td>2014</td>
            <td>Ghostly International</td>
          </tr>
          <tr>
            <td>Spectre</td>
            <td>2014</td>
            <td>Ghostly International</td>
          </tr>
          <tr>
            <td>See</td>
            <td>2014</td>
            <td>Ghostly International</td>
          </tr>
          <tr>
            <td>Division</td>
            <td>2016</td>
            <td>Ghostly International</td>
          </tr>
          <tr>
            <td>Epoch</td>
            <td>2016</td>
            <td>Ghostly International</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <blockquote class="blockquote-reverse">
        <p><em>"Music is the most beautiful form of communication we have. It transcends language and fosters new experiences and perspectives."</em></p>
        <footer class="blockquote-footer">Scott Hansen, aka Tycho</footer>
</blockquote></blockquote>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8 col-md-offset-2">
      <p class="text-center"><strong>If you'd like to find out more about Tycho and Scott Hansen, you can visit the website <a href="http://tychomusic.com/" target="_blank">here</a>.</strong>
    </div>
  </div>
</div>
            
          
!
            
              .container {
  background-color: #E0E3D2;
}

.h1, h1, p, h2, h3, table, thead, th, tr, td, blockquote, footer {
  color: #212028
}

.jumbotron {
  background-color: #E0E3D2;
  margin-bottom: 0;
  margin-top: 0;
  padding: 15px;
}

#epoch-artwork {
  margin-bottom: 25px;
}

ul {
  list-style: none;
  padding-left: 0;
}

a {
  color: #AD4232;
}

.blockquote-reverse, blockquote.pull-right {
  border-right: 0.5px solid #AD4232;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console