[Menu]
Home
About
Work
Blog
Contact
[Let’s Talk]
example@gmail.com
[Socials]
Logo
Immersive Creative Studio
Contact
Contact
IconIcon
Menu
Close
[000] Instructions

Usage Guidelines

Customizing colors

This template utilizes the, allowing you to effortlessly modify all colors, which will be promptly updated across the entire site.

To adjust a color, navigate to the Variables panel, then choose the color you wish to modify.
‍
SVG element colorIn
order to change the color of SVGs, Download .svg file from Assets and open it to any text editor. Change HEX color code with color of your choice and replace updated .svg file with the current file.

Changing fonts

To adjust the font family, navigate to the Variables panel, then choose the font family you wish to modify.
‍
If you want to change fonts, you can always go toSite Settings > Fonts.There, you will be able to upload custom fonts, use Google Fonts, or even connect your Adobe Fonts account.
‍
Once you've uploaded a font fromSite Settings, navigate to the Variables panel, then choose the font family you uploaded.

Starter Page

The “Starter Page” template provides a solid foundation for building your pages. It includes a pre-designed header, footer, and a blank section with a container to help you get started quickly.

Duplicate the Starter Page and start editing or adding sections from other pages.

Template Support

We'll be glad to help you out with your queries. Please contact us at theWebflow template support pageand you shall hear back very soon.

Duplicate the Starter Page and start editing or adding sections from other pages.

Important notes:
  • SVG: For the best visual experience, we recommend using SVG icons and logotypes. You can explore a wide selection of SVG icons on Icon Finder or download them from the  icons web app.
  • Image Formats: There are mainly 2 common file types that are used for web images which are JPEG and PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images.
  • Compress images: For a better loading site, compress existing image to AVIF or WebP files with the built-in Image conversion tool.
  • Clean up: Clean up interactions and Clean Up CSS styles before publishing your site.
  • Audit panel: Before going live with your site, find and fix accessibility issues with Webflow Audit Panel
  • SEO: Before publishing your site, make sure to edit the Title Tag, Meta Description, etc. For more information on SEO and how to optimize your website, Visit Add SEO title and meta description and SEO and Webflow: the essential guide.
GSAP Add, Remove and Disable

Add Animation
just apply Animation class like "fade-up", "fade-down", "reveal-text"

Remove Animation
simply delete that class from the element.

Disable Animation
You can also disable animation completely by removing the GSAP script or commenting it out.

How to Use the Built-in GSAP Animations

1) Rich Text (reading motion)
Triggers a smooth reveal on any text block as soon as it enters the viewport.
‍Wrapper: rich-text-anim (add to your Rich Text element)

<div class="rich-text-anim">
  <h4>Beautiful Interface</h4>
  <h5>Beautiful Interface</h5>
  <p>Design that blends clarity, strategy, and emotion.</p>
  <li>Fast</li>
  <li>Clean</li>
  <li>Accessible</li>
</div>

2) Brand Marquee (infinite loop)
Creates a seamless, continuously moving row. The code duplicates your items automatically.
Wrapper:marquee
‍Inner:marquee-inner
‍Item:marquee-part
Optional attribute:data-marquee-duration="40" (seconds)

<div class="marquee" data-marquee-duration="40">
  <div class="marquee-inner">
    <div class="marquee-part">Your content here</div>
    <div class="marquee-part">Your content here</div>
    <div class="marquee-part">Your content here</div>
  </div>
</div>
Notes & Tips
  • These classes auto-hook into the template’s GSAP: no extra scripting needed.
  • Use lightweight images/SVGs inside marquees for smooth motion.
  • Animations respect the user’s Reduced Motion preference automatically.
  • If something doesn’t animate, confirm the wrapper class names match exactly.
Sticky Menu SVG Rail + Indicator (How to Use)

This template includes a “Sticky Menu” that uses SVG masking to show:

  • a Gray rail (background line)
  • an Orange indicator (active progress line)

‍

Because SVG masking is involved, please follow the steps below exactly.

1) Required Structure (Elements & Classes)
  • Your sticky menu must contain these elements:
    • Wrapper: .header-sticky-menu
    • Menu container: .sticky-menu-box
    • Menu links: .sticky-menu-link
    • Rail element (empty div): .sticky-rail
    • Indicator element (empty div): .sticky-indicator
2) Add the SVG Mask (Required)

The rail/indicator uses a mask, so you must include the SVG in one of these ways:

Inline SVG in the page (hidden)

Place this SVG once per page (footer is fine). Keep it hidden:

1<svg width="12" height="494" viewBox="0 0 12 494" fill="none" xmlns="http://www.w3.org/2000/svg">
2<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 492.72)" fill="#323232"/>
3<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 486.88)" fill="#323232"/>
4<rect width="1" height="9" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 3 481.04)" fill="#323232"/>
5<rect y="476.2" width="2" height="12" rx="1" transform="rotate(-90 0 476.2)" fill="#6C6C6C"/>
6<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 468.36)" fill="#323232"/>
7<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 462.52)" fill="#323232"/>
8<rect width="1" height="9" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 3 456.68)" fill="#323232"/>
9<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 450.84)" fill="#323232"/>
10<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 445)" fill="#323232"/>
11<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 439.16)" fill="#323232"/>
12<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 433.32)" fill="#323232"/>
13<rect width="1" height="9" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 3 427.48)" fill="#323232"/>
14<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 421.64)" fill="#323232"/>
15<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 415.8)" fill="#323232"/>
16<rect y="410.96" width="2" height="12" rx="1" transform="rotate(-90 0 410.96)" fill="#6C6C6C"/>
17<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 403.12)" fill="#323232"/>
18<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 397.28)" fill="#323232"/>
19<rect width="1" height="9" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 3 391.44)" fill="#323232"/>
20<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 385.6)" fill="#323232"/>
21<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 379.76)" fill="#323232"/>
22<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 373.92)" fill="#323232"/>
23<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 368.08)" fill="#323232"/>
24<rect width="1" height="9" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 3 362.24)" fill="#323232"/>
25<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 356.4)" fill="#323232"/>
26<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 350.56)" fill="#323232"/>
27<rect y="345.72" width="2" height="12" rx="1" transform="rotate(-90 0 345.72)" fill="#6C6C6C"/>
28<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 337.88)" fill="#323232"/>
29<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 332.04)" fill="#323232"/>
30<rect width="1" height="9" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 3 326.2)" fill="#323232"/>
31<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 320.36)" fill="#323232"/>
32<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 314.52)" fill="#323232"/>
33<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 308.68)" fill="#323232"/>
34<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 302.84)" fill="#323232"/>
35<rect width="1" height="9" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 3 297)" fill="#323232"/>
36<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 291.16)" fill="#323232"/>
37<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 285.32)" fill="#323232"/>
38<rect y="280.48" width="2" height="12" rx="1" transform="rotate(-90 0 280.48)" fill="#6C6C6C"/>
39<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 272.64)" fill="#323232"/>
40<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 266.8)" fill="#323232"/>
41<rect width="1" height="9" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 3 260.96)" fill="#323232"/>
42<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 255.12)" fill="#323232"/>
43<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 249.28)" fill="#323232"/>
44<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 243.44)" fill="#323232"/>
45<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 237.6)" fill="#323232"/>
46<rect width="1" height="9" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 3 231.76)" fill="#323232"/>
47<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 225.92)" fill="#323232"/>
48<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 220.08)" fill="#323232"/>
49<rect y="215.24" width="2" height="12" rx="1" transform="rotate(-90 0 215.24)" fill="#6C6C6C"/>
50<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 207.4)" fill="#323232"/>
51<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 201.56)" fill="#323232"/>
52<rect width="1" height="9" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 3 195.72)" fill="#323232"/>
53<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 189.88)" fill="#323232"/>
54<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 184.04)" fill="#323232"/>
55<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 178.2)" fill="#323232"/>
56<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 172.36)" fill="#323232"/>
57<rect width="1" height="9" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 3 166.52)" fill="#323232"/>
58<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 160.68)" fill="#323232"/>
59<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 154.84)" fill="#323232"/>
60<rect y="150" width="2" height="12" rx="1" transform="rotate(-90 0 150)" fill="#6C6C6C"/>
61<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 142.16)" fill="#323232"/>
62<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 136.32)" fill="#323232"/>
63<rect width="1" height="9" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 3 130.48)" fill="#323232"/>
64<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 124.64)" fill="#323232"/>
65<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 118.8)" fill="#323232"/>
66<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 112.96)" fill="#323232"/>
67<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 107.12)" fill="#323232"/>
68<rect width="1" height="9" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 3 101.28)" fill="#323232"/>
69<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 95.4401)" fill="#323232"/>
70<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 89.6001)" fill="#323232"/>
71<rect y="84.7602" width="2" height="12" rx="1" transform="rotate(-90 0 84.7602)" fill="#6C6C6C"/>
72<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 76.9201)" fill="#323232"/>
73<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 71.0801)" fill="#323232"/>
74<rect width="1" height="9" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 3 65.2401)" fill="#323232"/>
75<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 59.4001)" fill="#323232"/>
76<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 53.5601)" fill="#323232"/>
77<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 47.7201)" fill="#323232"/>
78<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 41.8802)" fill="#323232"/>
79<rect width="1" height="9" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 3 36.0401)" fill="#323232"/>
80<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 30.2001)" fill="#323232"/>
81<rect width="1" height="7" rx="0.5" transform="matrix(-1.19249e-08 1 1 1.19249e-08 5 24.3601)" fill="#323232"/>
82<rect y="19.5202" width="2" height="12" rx="1" transform="rotate(-90 0 19.5202)" fill="#ED4609"/>
83<rect x="5" y="12.6801" width="1" height="7" rx="0.5" transform="rotate(-90 5 12.6801)" fill="#323232"/>
84<rect x="5" y="6.84012" width="1" height="7" rx="0.5" transform="rotate(-90 5 6.84012)" fill="#323232"/>
85<rect x="3" y="1.00015" width="1" height="9" rx="0.5" transform="rotate(-90 3 1.00015)" fill="#323232"/>
86</svg>
87