Menu of headlines that split in two
Huge links that, on hover or focus, slice through the middle and pull apart to show a hidden line of text.
Settings
Code
<nav class="uvq14-slc" aria-label="Main menu"><a href="#"><span class="n" aria-hidden="true">01</span><span class="w"><span class="b">Projects</span><span class="t" aria-hidden="true">Projects</span><span class="m">Twelve real cases</span></span></a><a href="#"><span class="n" aria-hidden="true">02</span><span class="w"><span class="b">Studio</span><span class="t" aria-hidden="true">Studio</span><span class="m">Six people, one workshop</span></span></a><a href="#"><span class="n" aria-hidden="true">03</span><span class="w"><span class="b">Contact</span><span class="t" aria-hidden="true">Contact</span><span class="m">We reply within a day</span></span></a></nav>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Text & scroll
See all Text & scrollWhere to use it
Big uppercase menus are common on studio sites, and this one adds a cut: each word is drawn twice with complementary clip paths, so on hover the top and bottom halves slide apart in different colors and a small caption appears in the gap. The links stay plain anchors with readable names. It suits portfolio navigation, agency menus and editorial indexes.
Write the first item in the text field and edit the others and their captions in the HTML. The main color paints the upper half and the caption, the secondary one the lower half. Keyboard focus triggers the same split as the pointer.