Skip to content

Image-driven homepage: hero, logo overlay, and performance strip #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cpmpercussion merged 2 commits into from
Jul 10, 2026
Merged

Image-driven homepage: hero, logo overlay, and performance strip #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5bb1e0b
Add image-driven styling to the homepage
claude Jul 10, 2026
99ae7fc
Layer the lab logo over a rotating hero image
claude Jul 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
223 changes: 223 additions & 0 deletions assets/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,229 @@ a:focus {
.entry-venue.is-top { color: #ffa94d; }
}

/* ---- Homepage: image-driven styling ---- */

/* prevent full-bleed sections from creating a horizontal scrollbar */
body { overflow-x: hidden; }
Comment on lines +95 to +96

/* full-bleed hero banner built from a performance photo */
.home-hero {
position: relative;
left: 50%;
right: 50%;
width: 100vw;
margin-left: -50vw;
margin-right: -50vw;
margin-top: calc(var(--spacer) * -1);
margin-bottom: var(--spacer-2);
min-height: clamp(340px, 62vh, 580px);
display: flex;
align-items: flex-end;
background-color: #1a1024;
background-size: cover;
background-position: center 35%;
overflow: hidden;
}

/* dark + warm scrim keeps the overlaid text and logo legible over any photo */
.home-hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(12,7,22,0.4) 0%, rgba(12,7,22,0.55) 55%, rgba(12,7,22,0.9) 100%),
linear-gradient(90deg, rgba(255,80,80,0.28) 0%, rgba(255,80,80,0) 55%);
}

/* thin warm accent bar echoing the site's link gradient */
.home-hero::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 5px;
background: linear-gradient(90deg, rgba(255,188,48,0.95) 0%, rgba(255,80,80,0.95) 100%);
}

.home-hero-inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 48rem;
margin: 0 auto;
padding: var(--spacer-2) var(--spacer);
color: #fff;
}

/* lab wordmark layered over the rotating performance photo */
.home-hero-logo {
display: block;
width: auto;
max-width: min(280px, 66%);
height: auto;
margin: 0 0 1em;
filter: drop-shadow(0 3px 14px rgba(0,0,0,0.55));
}

/* the theme prints an <h1 class="page-title">SMCClab</h1> above the content;
on the homepage the hero wordmark replaces it visually, but keep it in the
accessibility tree / for SEO as the page's h1 */
.page:has(.home-hero) .page-title {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}

/* scoped under .home-hero to outrank the theme's `.page h2 { color }` rule */
.home-hero .home-hero-title {
margin: 0 0 0.35em;
font-size: clamp(1.6em, 4.5vw, 2.5em);
line-height: 1.15;
color: #fff;
text-shadow: 0 2px 18px rgba(0,0,0,0.55);
}

.home-hero-lead {
margin: 0 0 1.1em;
max-width: 34em;
font-size: 1.05em;
line-height: 1.5;
color: rgba(255,255,255,0.92);
text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}

.home-hero-actions {
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.6em;
}

.hero-btn {
display: inline-block;
padding: 0.55em 1.15em;
border-radius: 999px;
border: 1.5px solid rgba(255,255,255,0.7);
font-weight: 600;
color: #fff;
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.hero-btn:hover,
.hero-btn:focus {
transform: translateY(-2px);
background: rgba(255,255,255,0.14);
-webkit-text-fill-color: #fff; /* override the global gradient-text link hover */
color: #fff;
text-decoration: none;
}

.hero-btn-primary {
border-color: transparent;
color: #2a0f0f;
background: linear-gradient(180deg, rgba(255,188,48,1) 0%, rgba(255,120,80,1) 100%);
}

.hero-btn-primary:hover,
.hero-btn-primary:focus {
color: #2a0f0f;
-webkit-text-fill-color: #2a0f0f;
filter: brightness(1.05);
}
Comment on lines +208 to +228

/* dynamic treatment for the research / teaching section images */
.feature-img {
display: block;
width: 100%;
margin: 0.5em 0 1.4em;
border-radius: 10px;
box-shadow: 0 8px 26px rgba(0,0,0,0.16);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.feature-img:hover {
transform: translateY(-4px) scale(1.008);
box-shadow: 0 16px 38px rgba(0,0,0,0.26);
}

/* full-bleed "on stage" performance strip */
.home-perf {
position: relative;
left: 50%;
right: 50%;
width: 100vw;
margin-left: -50vw;
margin-right: -50vw;
margin-top: var(--spacer-3);
margin-bottom: var(--spacer-2);
padding: var(--spacer-2) 0;
background: var(--code-bg-color);
border-top: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}

.home-perf-inner {
max-width: 64rem;
margin: 0 auto;
padding: 0 var(--spacer);
}

.home-perf-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1em;
margin-bottom: 0.9em;
}

.home-perf-head h2 {
margin: 0;
font-size: 1.3em;
}

.home-perf-head a {
font-size: 0.85em;
font-weight: 600;
}

.home-perf-scroll {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(230px, 1fr);
gap: 10px;
overflow-x: auto;
padding-bottom: 0.6em;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}

.home-perf-scroll a {
display: block;
scroll-snap-align: start;
border-radius: 8px;
overflow: hidden;
}

.home-perf-scroll img {
display: block;
width: 100%;
height: 180px;
object-fit: cover;
transition: transform 0.4s ease;
}

.home-perf-scroll a:hover img,
.home-perf-scroll a:focus img {
transform: scale(1.05);
}

/* performance hero gallery */
.perf-gallery {
display: grid;
Expand Down
58 changes: 51 additions & 7 deletions index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,35 @@ layout: page
title: SMCClab
---

Welcome to the Sound, Music, and Creative Computing Lab at the Australian National University [School of Computing](https://comp.anu.edu.au).
<section class="home-hero" id="home-hero"
data-hero-images="{% link assets/NIME2026-charles-yichen-performing-1.jpg %},{% link assets/NIME2026-charles-yichen-performing-2.jpg %},{% link assets/2025-smcclablive-1-1.jpg %},{% link assets/2025-dream-tent.jpg %},{% link assets/2023-beyond-realms.jpg %}"
style="background-image: url('{% link assets/NIME2026-charles-yichen-performing-1.jpg %}');">
<div class="home-hero-inner">
<img class="home-hero-logo" src="{% link assets/lab-logo/smcclab-white.png %}" alt="SMCClab — Sound, Music and Creative Computing Lab">
<h2 class="home-hero-title">New musical instruments that sense, understand, and perform.</h2>
<p class="home-hero-lead">We build intelligent instruments and creative computing systems — then take them on stage as both a research method and a creative output.</p>
<p class="home-hero-actions">
<a class="hero-btn hero-btn-primary" href="{{ '/performances/' | relative_url }}">See our performances</a>
<a class="hero-btn" href="{{ '/join/' | relative_url }}">Join the lab</a>
</p>
</div>
</section>

<script>
// Pick a random performance photo behind the hero logo on each visit.
(function () {
var hero = document.getElementById('home-hero');
if (!hero) return;
var imgs = (hero.getAttribute('data-hero-images') || '').split(',').filter(Boolean);
if (imgs.length < 2) return;
var pick = imgs[Math.floor(Math.random() * imgs.length)];
var pre = new Image();
pre.onload = function () { hero.style.backgroundImage = "url('" + pick + "')"; };
pre.src = pick;
})();
</script>

![]({% link assets/smcclab-title-slide.jpg %})
Welcome to the Sound, Music, and Creative Computing Lab at the Australian National University [School of Computing](https://comp.anu.edu.au).

Our lab aims to develop **new musical instruments** that sense and understand music, actively **assisting musicians** during performances. We apply **computational intelligence**, **AR/VR**, and **sonic interaction design** in creative contexts. We explore how creative computing can inform studies of collaboration, spatial interaction, and decision making.

Expand Down Expand Up @@ -37,31 +63,49 @@ SMCClab explores research in the broad area of sound, music and creative computi

### Collaborative Interfaces

![]({% link assets/collaboration.jpg %})
![Musicians playing networked touchscreen musical instruments together]({% link assets/collaboration.jpg %}){:.feature-img}

This research aims to create new ways for groups to make music together. We created **touchscreen musical instruments** that communicate interactions over a network. These instruments engage music performers in new kinds of **ensemble interaction**.

### Spatial Interaction

![]({% link assets/spatial.jpg %})
![Performer using freehand gestures with a spatial AR/VR musical instrument]({% link assets/spatial.jpg %}){:.feature-img}

We create **authentic spatial musical apps** that support interaction in AR/VR computers. We experimented with new **freehand gestures** in AR and have deployed a spiral-shaped keyboard in collaborative music experiments as well as artistic performances.

### Generative Sound

![]({% link assets/spectrogram.jpg %})
![Spectrogram of AI-generated sound]({% link assets/spectrogram.jpg %}){:.feature-img}

AI-generated sound could change the way we make sounds and create music. We have developed a new approach to **singing-voice synthesis** focussed on more **accurate duration predictions**, enabling end-to-end training. We are now looking at novel **text-to-sound** generation models.

### Intelligent Interfaces

![]({% link assets/intelligent.jpg %})
![EMPI, a portable musical robot with a one-dimensional interface, responding to a performer]({% link assets/intelligent.jpg %}){:.feature-img}

Intelligent instruments predict human musical interactions to help them create music. We model **embodied musical interactions**, or the movements of human performers. Our prototypes include **EMPI**, a portable musical robot that responds to performances with a 1-dimensional musical interface.

<section class="home-perf">
<div class="home-perf-inner">
<div class="home-perf-head">
<h2>On stage</h2>
<a href="{{ '/performances/' | relative_url }}">All performances →</a>
</div>
<div class="home-perf-scroll">
<a href="{{ '/performances/' | relative_url }}"><img src="{% link assets/NIME2026-charles-yichen-performing-2.jpg %}" alt="Intelligent instrument performance at NIME 2026, London" loading="lazy"></a>
<a href="{{ '/performances/' | relative_url }}"><img src="{% link assets/2026-charles-martin-soundout.jpg %}" alt="Charles Martin performing with intelligent instruments at SoundOut Festival 2026" loading="lazy"></a>
<a href="{{ '/performances/' | relative_url }}"><img src="{% link assets/2025-smcclablive-1-1.jpg %}" alt="Spatial AR/VR musical performance at SMCClab Live" loading="lazy"></a>
<a href="{{ '/performances/' | relative_url }}"><img src="{% link assets/2025-dream-tent.jpg %}" alt="Dream Tent installation with Martyn Jolly at the ANU Drill Hall Gallery" loading="lazy"></a>
<a href="{{ '/performances/' | relative_url }}"><img src="{% link assets/2023-beyond-realms.jpg %}" alt="破境 // beyond realms by Yichen Wang and Sandy Ma at ACMC 2023" loading="lazy"></a>
<a href="{{ '/performances/' | relative_url }}"><img src="{% link assets/metatone-hands-header.jpg %}" alt="Ensemble Metatone touchscreen performance" loading="lazy"></a>
<a href="{{ '/performances/' | relative_url }}"><img src="{% link assets/2026-06-SandyMa-HautedTreasures-work.jpg %}" alt="Sandy Ma, Haunted Treasures at Platform, Canberra Contemporary" loading="lazy"></a>
</div>
</div>
</section>

## Teaching

![]({% link assets/laptop-ensemble-promo.jpg %})
![ANU Laptop Ensemble performing together]({% link assets/laptop-ensemble-promo.jpg %}){:.feature-img}

[Charles](https://charlesmartin.au) and other SMCClab members are involved in teaching several courses at the ANU, including:

Expand Down