<div class="site">
<header class="site__header">
<div id="header-34618-63451" class="header">
<div class="header__inner">
<a class="header__logo" href="#" title="zplane">
<img width="164" height="50" src="/assets/images/logo.7e7ebc0793.svg" alt="zplane" class="header__logo-img">
</a>
<div class="header__contents">
<div class="header__icon-buttons">
<button class="button" type="button" title="Open menu" aria-expanded="false" aria-controls="header-34618-63451-menu" data-action="open">
<span class="button__icon">
<svg class="icon icon--bars" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#bars"></use>
</svg> </span>
</button>
<div class="header__icon-button">
<a class="button" title="Partner Area" href="#">
<span class="button__icon">
<svg class="icon icon--lock-keyhole" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#lock-keyhole"></use>
</svg> </span>
</a>
</div>
</div>
<div class="header__menu" id="header-34618-63451-menu" hidden>
<div class="header__menu-close">
<button class="button" type="button" title="Close menu" data-action="close">
<span class="button__icon">
<svg class="icon icon--xmark" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#xmark"></use>
</svg> </span>
</button>
</div>
<ul class="header__navigation">
<li class="header__navigation-item" data-floating-root>
<span class="header__navigation-link">
<button class="link" type="button" data-link-block data-link-type="internal" aria-expanded="false" aria-haspopup="true" aria-controls="header-34618-63451-navigation-menu-1"><span class="link__text u-underline">Company</span><span class="link__icon"><svg class="icon icon--caret-down-solid" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#caret-down-solid"></use>
</svg></span></button>
</span>
<ul class="header__navigation-menu" id="header-34618-63451-navigation-menu-1" data-floating-placements="bottom" data-floating-offset="16" role="menu" hidden>
<li class="header__navigation-menu-item" role="presentation">
<a class="link" data-link-type="internal" href="#" role="menuitem"><span class="link__text u-underline">Overview</span></a>
</li>
<li class="header__navigation-menu-item" role="presentation">
<a class="link" data-link-type="internal" href="#" role="menuitem"><span class="link__text u-underline">Pressroom</span></a>
</li>
<li class="header__navigation-menu-item" role="presentation">
<a class="link" data-link-type="internal" href="#" role="menuitem"><span class="link__text u-underline">Blog & News</span></a>
</li>
</ul>
</li>
<li class="header__navigation-item" data-floating-root>
<span class="header__navigation-link">
<a class="link" data-link-block data-link-type="internal" href="#" aria-current="true"><span class="link__text u-underline">Technology</span></a>
</span>
</li>
<li class="header__navigation-item" data-floating-root>
<span class="header__navigation-link">
<a class="link" data-link-block data-link-type="internal" href="#"><span class="link__text u-underline">Licensing</span></a>
</span>
</li>
<li class="header__navigation-item" data-floating-root>
<span class="header__navigation-link">
<a class="link" data-link-block data-link-type="internal" href="#"><span class="link__text u-underline">Partner</span></a>
</span>
</li>
<li class="header__navigation-item" data-floating-root>
<span class="header__navigation-link">
<a class="link" data-link-block data-link-type="internal" href="#"><span class="link__text u-underline">Contact</span></a>
</span>
</li>
</ul>
<div class="header__navigation-highlight"></div>
</div>
<div class="header__login-button">
<a class="button" href="#">
<span class="button__icon">
<svg class="icon icon--lock-keyhole" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#lock-keyhole"></use>
</svg> </span>
<span class="button__text u-underline">Partner Area</span>
</a>
</div>
</div>
</div>
</div>
</header>
<nav class="site__breadcrumb" aria-current="Current position">
<nav class="breadcrumb" aria-label="Current position on site">
<ol class="breadcrumb__crumbs" role="list">
<li class="breadcrumb__crumb"><a class="breadcrumb__link u-underline" href="#"><span class="breadcrumb__link-icon"><svg class="icon icon--house" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#house"></use>
</svg></span><span class="breadcrumb__link-text u-hidden-visually">Startseite</span></a><svg class="icon icon--angle-right breadcrumb__arrow" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#angle-right"></use>
</svg></li>
<li class="breadcrumb__crumb"><a class="breadcrumb__link u-underline" href="#"><span class="breadcrumb__link-icon"><svg class="icon icon--arrow-turn-down-right" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-turn-down-right"></use>
</svg></span><span class="breadcrumb__link-text">Unterseite</span></a><svg class="icon icon--angle-right breadcrumb__arrow" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#angle-right"></use>
</svg></li>
<li class="breadcrumb__crumb"><a class="breadcrumb__link u-underline" href="#" aria-current="page"><span class="breadcrumb__link-icon"><svg class="icon icon--arrow-turn-down-right" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-turn-down-right"></use>
</svg></span><span class="breadcrumb__link-text">Artikel</span></a></li>
</ol>
<script type="application/ld+json">
{
"@context": "https:\/\/schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Startseite",
"item": "#"
},
{
"@type": "ListItem",
"position": 2,
"name": "Unterseite",
"item": "#"
},
{
"@type": "ListItem",
"position": 3,
"name": "Artikel",
"item": "#"
}
]
}
</script>
</nav>
</nav>
<main class="site__content">
<div id="page-24053-94302" class="page">
<div class="page__head">
<div class="page__headline-date">
<div class="page__headline">
<h1 class="headline" data-headline-size="1"><span class="headline__text">FAQ</span></h1>
</div>
<div class="page__description">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</div>
</div>
</div>
<div class="page__content">
<div class="page__section" data-scheme="light">
<div id="page-24053-94302-c1" class="page__block">
<div class="text">
<p class="paragraph">Isolate instruments or vocals – and remix, rebalance or remove stems in already mixed audio. All in real-time. All directly inside your DAW, right on the track you are working on.</p>
<p class="paragraph">PEEL STEMS is a plugin for real-time stem separation in any VST3-, AU- or AAX-compatible DAW. Simply bring it up as an insert on a track, and get creative with mixed audio as if you had access to its separate tracks.</p>
<p class="paragraph">PEEL STEMS is based on zplane’s new STEMS EFFICIENT technology and highly optimized for real-time low-latency processing. Of course, PEEL STEMS still needs to “read ahead” in order to separate audio inside a mixed track. But in most cases this latency is automatically compensated by the DAW. So now, removing vocals or bass in a loop is as simple as muting that stem while you are playing it back!</p>
</div>
</div>
<div id="page-24053-94302-c2" class="page__block" data-block-size="left">
<picture class="image">
<img class="image__img" src="https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++" width="470" height="264" loading="lazy" />
</picture>
</div>
<div id="page-24053-94302-c3" class="page__block">
<div class="text">
<h2 class="headline" data-headline-size="3"><span class="headline__text">Key Features</span></h2>
<ul class="bullet-list" role="list" data-bullet-list-type="unordered">
<li class="bullet-list__item">
<span class="bullet-list__text">Real-time audio stem separation</span>
</li>
<li class="bullet-list__item">
<span class="bullet-list__text">Soundfield Display: Visually identify single stems in a mix</span>
</li>
<li class="bullet-list__item">
<span class="bullet-list__text">Mute, Solo or Rebalance stems (Drums, Bass, Vocals, Other)</span>
</li>
<li class="bullet-list__item">
<span class="bullet-list__text">Includes all PEEL features including the Focus EQ</span>
</li>
<li class="bullet-list__item">
<span class="bullet-list__text">Route selected audio to external processing (supported in Ableton Live, FL Studio, Pro Tools, Reason, Reaper)</span>
</li>
<li class="bullet-list__item">
<span class="bullet-list__text">VST3/AU/AAX formats</span>
</li>
<li class="bullet-list__item">
<span class="bullet-list__text">Compatible with Intel- and M1-based Macs</span>
</li>
</ul>
<h2 class="headline" data-headline-size="3"><span class="headline__text">Technical Specifications</span></h2>
<ul class="bullet-list" role="list" data-bullet-list-type="unordered">
<li class="bullet-list__item">
<span class="bullet-list__text">CPU: Apple Silicon (M1 or higher) recommended</span>
</li>
<li class="bullet-list__item">
<span class="bullet-list__text">Plugin formats: VST3, AU and AAX</span>
</li>
<li class="bullet-list__item">
<span class="bullet-list__text">Supported Operating Systems*: Windows 10 & 11 (64bit), and macOS 13 or higher (Intel & Silicon)</span>
</li>
</ul>
</div>
</div>
</div>
<div id="page-24053-94302-c4" class="page__block" data-block-size="section">
<div id="section-87892-70078" class="section">
<div class="section__inner">
<div class="section__head">
<div class="section__headline">
<h1 class="headline" data-headline-size="3"><span class="headline__text">Features</span></h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="site__footer">
<div id="footer-68637-28696" class="footer">
<div class="footer__inner">
<div class="footer__sitemap">
<div class="footer__section">
<div id="footer-68637-28696-sitemap-section-1" class="footer__section-headline">
<span class="headline" data-headline-size="6"><span class="headline__text">Information</span></span>
</div>
<ul class="footer__links" role="list" aria-labelledby="footer-68637-28696-sitemap-section-1">
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">About us</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Contact</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Service</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Blog & News</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Pressroom</span></a></li>
</ul>
</div>
<div class="footer__section">
<div id="footer-68637-28696-sitemap-section-2" class="footer__section-headline">
<span class="headline" data-headline-size="6"><span class="headline__text">Licensing</span></span>
</div>
<ul class="footer__links" role="list" aria-labelledby="footer-68637-28696-sitemap-section-2">
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Information</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Models</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">SDK Content</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Support</span></a></li>
</ul>
</div>
<div class="footer__section">
<div id="footer-68637-28696-sitemap-section-3" class="footer__section-headline">
<span class="headline" data-headline-size="6"><span class="headline__text">SDK Products</span></span>
</div>
<ul class="footer__links" role="list" aria-labelledby="footer-68637-28696-sitemap-section-3">
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">4TUNE</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">ATAAK!</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">AUFTAKT</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">BARBEATQ</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">CWAVE</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">ELASTIQUE</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">ESPACE</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">FXPACK</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">KORT</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">METERING</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">RESTORE</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">RETUNE</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">TONART</span></a></li>
<li class="footer__link"><a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">ZREVERB</span></a></li>
</ul>
</div>
</div>
<div class="footer__icon-buttons">
<a class="button" title="Email contact" href="#">
<span class="button__icon">
<svg class="icon icon--envelope" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#envelope"></use>
</svg> </span>
</a>
<a class="button" title="Facebook" href="#">
<span class="button__icon">
<svg class="icon icon--facebook" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#facebook"></use>
</svg> </span>
</a>
<a class="button" title="LinkedIn" href="#">
<span class="button__icon">
<svg class="icon icon--linkedin" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#linkedin"></use>
</svg> </span>
</a>
<a class="button" title="X" href="#">
<span class="button__icon">
<svg class="icon icon--x" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#x"></use>
</svg> </span>
</a>
<a class="button" title="YouTube" href="#">
<span class="button__icon">
<svg class="icon icon--youtube" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.dcaca1c147.svg#youtube"></use>
</svg> </span>
</a>
</div>
<div class="footer__closing-line">
<img width="164" height="50" src="/assets/images/logo.7e7ebc0793.svg" alt="zplane" class="footer__logo">
<ul class="footer__meta-links">
<li class="footer__meta-link">
<a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Imprint</span></a>
</li>
<li class="footer__meta-link">
<a class="link" data-link-type="internal" href="#"><span class="link__text u-underline">Privacy Policy</span></a>
</li>
</ul>
</div>
</div>
</div>
</footer>
</div>
{% set contentTag = contentTag ?? 'main' %}
<div {{ html_attributes({
id: id ?? false,
class: 'site',
}, attrs ?? {}) }}>
<header {{ html_attributes({
class: 'site__header',
}, headerAttrs ?? {}) }}>
{% include '@header' with header only %}
</header>
{% if breadcrumb|default %}
<nav class="site__breadcrumb" aria-current="{{ 'Current position' | t('site') }}">
{% include '@breadcrumb' with breadcrumb only %}
</nav>
{% endif %}
{% if stage|default %}
<div class="site__stage">
{% include '@stage' with stage only %}
</div>
{% endif %}
<{{ contentTag }} {{ html_attributes({
class: 'site__content',
}, contentAttrs ?? {}) }}>
{% include '@page' with page only %}
</{{ contentTag }}>
<footer {{ html_attributes({
class: 'site__footer',
}, footerAttrs ?? {}) }}>
{% include '@footer' with footer only %}
</footer>
</div>
{
"header": {
"logo": {
"text": "zplane",
"link": "#"
},
"navigation": [
{
"text": "Company",
"link": "#",
"children": [
{
"text": "Pressroom",
"link": "#"
},
{
"text": "Blog & News",
"link": "#"
}
]
},
{
"text": "Technology",
"link": "#",
"active": true
},
{
"text": "Licensing",
"link": "#"
},
{
"text": "Partner",
"link": "#"
},
{
"text": "Contact",
"link": "#"
}
],
"iconButtons": [
{
"link": "#",
"title": "Partner Area",
"icon": "lock-keyhole"
}
],
"loginButton": {
"link": "#",
"text": "Partner Area",
"icon": "lock-keyhole"
}
},
"page": {
"blocks": [
{
"content": "!twig\n\n{% set text %}\n <p>Isolate instruments or vocals – and remix, rebalance or remove stems in already mixed audio. All in real-time. All directly inside your DAW, right on the track you are working on.</p>\n <p>PEEL STEMS is a plugin for real-time stem separation in any VST3-, AU- or AAX-compatible DAW. Simply bring it up as an insert on a track, and get creative with mixed audio as if you had access to its separate tracks.</p>\n <p>PEEL STEMS is based on zplane’s new STEMS EFFICIENT technology and highly optimized for real-time low-latency processing. Of course, PEEL STEMS still needs to “read ahead” in order to separate audio inside a mixed track. But in most cases this latency is automatically compensated by the DAW. So now, removing vocals or bass in a loop is as simple as muting that stem while you are playing it back!</p>\n{% endset %}\n\n{% include '@text' with { text } only %}\n"
},
{
"size": "left",
"content": "!twig\n\n{% include '@image' with {\n src: 'https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++',\n width: 470,\n height: 264,\n} only %}\n"
},
{
"content": "!twig\n\n{% set text %}\n <h1>Key Features</h1>\n <ul>\n <li>Real-time audio stem separation</li>\n <li>Soundfield Display: Visually identify single stems in a mix</li>\n <li>Mute, Solo or Rebalance stems (Drums, Bass, Vocals, Other)</li>\n <li>Includes all PEEL features including the Focus EQ</li>\n <li>Route selected audio to external processing (supported in Ableton Live, FL Studio, Pro Tools, Reason, Reaper)</li>\n <li>VST3/AU/AAX formats</li>\n <li>Compatible with Intel- and M1-based Macs</li>\n </ul>\n <h1>Technical Specifications</h1>\n <ul>\n <li>CPU: Apple Silicon (M1 or higher) recommended</li>\n <li>Plugin formats: VST3, AU and AAX</li>\n <li>Supported Operating Systems*: Windows 10 & 11 (64bit), and macOS 13 or higher (Intel & Silicon)</li>\n </ul>\n{% endset %}\n\n{% include '@text' with { text } only %}\n"
},
{
"size": "section",
"content": "!twig\n\n{% include '@section' with {\n boxTheme: 'electric-gray-dark',\n headline: {\n text: 'Features',\n },\n} only %}\n"
}
],
"headline": {
"size": 1,
"text": "FAQ"
},
"description": "<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>\n"
},
"breadcrumb": {
"items": [
{
"text": "Startseite",
"link": "#"
},
{
"text": "Unterseite",
"link": "#"
},
{
"text": "Artikel",
"link": "#"
}
]
},
"footer": {
"sitemap": [
{
"title": "Information",
"links": [
{
"link": "#",
"text": "About us"
},
{
"link": "#",
"text": "Contact"
},
{
"link": "#",
"text": "Service"
},
{
"link": "#",
"text": "Blog & News"
},
{
"link": "#",
"text": "Pressroom"
}
]
},
{
"title": "Licensing",
"links": [
{
"link": "#",
"text": "Information"
},
{
"link": "#",
"text": "Models"
},
{
"link": "#",
"text": "SDK Content"
},
{
"link": "#",
"text": "Support"
}
]
},
{
"title": "SDK Products",
"links": [
{
"link": "#",
"text": "4TUNE"
},
{
"link": "#",
"text": "ATAAK!"
},
{
"link": "#",
"text": "AUFTAKT"
},
{
"link": "#",
"text": "BARBEATQ"
},
{
"link": "#",
"text": "CWAVE"
},
{
"link": "#",
"text": "ELASTIQUE"
},
{
"link": "#",
"text": "ESPACE"
},
{
"link": "#",
"text": "FXPACK"
},
{
"link": "#",
"text": "KORT"
},
{
"link": "#",
"text": "METERING"
},
{
"link": "#",
"text": "RESTORE"
},
{
"link": "#",
"text": "RETUNE"
},
{
"link": "#",
"text": "TONART"
},
{
"link": "#",
"text": "ZREVERB"
}
]
}
],
"iconButtons": [
{
"link": "#",
"title": "Email contact",
"icon": "envelope"
},
{
"link": "#",
"title": "Facebook",
"icon": "facebook"
},
{
"link": "#",
"title": "LinkedIn",
"icon": "linkedin"
},
{
"link": "#",
"title": "X",
"icon": "x"
},
{
"link": "#",
"title": "YouTube",
"icon": "youtube"
}
],
"metaLinks": [
{
"link": "#",
"text": "Imprint"
},
{
"link": "#",
"text": "Privacy Policy"
}
]
}
}
@use 'layers';
@property --site-header-background-opacity {
initial-value: 0;
syntax: '<alpha-value>';
}
@layer site {
.site {
background-color: var(--color-gray-050);
background-image: linear-gradient(to bottom, var(--color-white), var(--color-gray-050));
background-position: 0 0;
background-repeat: 0;
background-size: 100% 20rem;
display: flex;
flex-direction: column;
inline-size: 100%;
max-inline-size: 100vw;
min-block-size: 100vh;
overflow: clip;
position: relative;
}
.site__header {
inline-size: 100%;
inset-block-start: 0;
inset-inline: 0;
padding-block: clamp(0.8rem, 2.5vw, 3.6rem);
padding-inline: var(--grid-padding);
position: sticky;
z-index: #{layers.position('header')};
&::before {
background-color: var(--color-white);
box-shadow: var(--box-shadow-xxl);
content: '';
inset: 0;
opacity: var(--site-header-background-opacity, 0);
position: absolute;
transition-property: opacity;
}
}
.site__breadcrumb {
margin-block: 0.8rem;
padding-inline: var(--grid-padding);
}
.site__stage {
inline-size: 100%;
margin-block: 4.8rem;
margin-inline: auto;
max-inline-size: var(--grid-container);
padding-inline: var(--grid-padding);
}
.site__content {
inline-size: 100%;
margin-block: 4.8rem;
margin-inline: auto;
max-inline-size: var(--grid-container);
padding-inline: var(--grid-padding);
}
.site__footer {
inline-size: 100%;
margin-block-start: 6rem;
margin-inline: auto;
max-inline-size: var(--grid-container);
padding-block-end: 3.6rem;
padding-inline: var(--grid-padding);
}
}
import onLoad from '../../../javascripts/utils/onLoad';
onLoad<HTMLElement>('.site__header', ($header) => {
const threshold = 100;
document.addEventListener('scroll', () => {
$header.style.setProperty(
'--site-header-background-opacity',
Math.min(1, window.scrollY / threshold).toPrecision(4),
);
}, { passive: true });
});
No notes defined.