3. Animations
Motion uses Framer’s own effects (appear, text, scroll, loop, hover and ticker effects, plus component variants) and a set of code components and overrides for what the effects can’t do. Effects sit in the right panel of each layer; code files are listed in the Assets panel.
Sections, cards and captions fade and rise as they scroll into view; hero content plays on page load.
Titles rise word by word, several with a soft blur. Hero titles play on load.
The hero coin row, the phone brand logos, the stats and CTA stripes, the balance cards, the testimonial columns and the logo strips scroll in an endless loop.
In the process section the circle turns and the four steps change as you scroll.
The bento coin stats, review cards and feature stack, the services tabs, the integrations carousel, the tokenomics donut and the FAQ accordions animate by switching variants.
Buttons, cards and links lift, tint or switch to a hover variant.
In Nav/Menu the pill rests under the current page and, on Home, follows Services and Features as you scroll. Home and Pages open on hover, click or keyboard and close on Escape or a click outside. The bar compacts once you scroll past the page’s Nav Trigger.
The burger switches Nav/Navigation to its Tablet Open or Phone Open variant; Nav/Mobile Menu lists the pages with expandable Home and Pages groups.
Chrome/Preloader plays its intro with CSS keyframes, so it finishes even before the page’s scripts run.
Code components and overrides
Nav/Menu (desktop menu with the Home and Pages panels and the sliding pill) and Nav/Mobile Menu (the burger menu list).
The intro overlay; Show Preloader switches it per page.
Chrome/ReducedMotion.tsx
Component + override · Every page
The component is placed once in the Main Template: while the visitor prefers reduced motion, Framer’s loop effects stop, appear and scroll reveals show their final state at once and hover effects change instantly, on every page. Its withReducedMotionTree override, set on the parent layer of every looping layer, rests loops and in-view variant switches in their designed state and stops Slideshow auto-play.
The coin bars in the stats card sink and rise one by one in a 4.8 s loop while they are in view.
Snaps the bento cards in the phone swipe row.
Snaps the process cards in the phone swipe row.
A light follows the scroll along the journey curve, or down the timeline on tablet and phone.
Draws the chart lines and grows the bars of the illustrations when they scroll into view.
Token/Swap Widget, the Buy CRT card: pick ETH, USDT or BTC and one of four preset amounts; every value is a preset.
The vesting bars grow from the left and the cliffs fade in, row by row.
The Monthly / Yearly toggle: the knob, both options and the price blocks.
The audience switcher: each tab shows its panel, First-Time Buyers by default.
The volume bars and uptime pills in the stats tiles, growing in when they come into view.
Styles the CMS Body: numbered headings, list cards and the closing callout.
Hover motion for the Other Services and feature cards.
Zooms a card’s cover image on hover, from tablet up.
The reading-progress bar at the top of each post.
The related card hover and the CMS Body styles: spacing, lists and pull quotes.
Hides the form fields once the success message shows.
The phone, email and support links with their line icons.
The 1px gradient ring around the form card.
Lights up the topic of the group in view on desktop and snaps the support cards on phones.
Grows the progress and vote bars, fills the status track and the journey line as you scroll, lifts the principle cards on hover and snaps the phone swipe rows.
Style_Guide/Overrides.tsx
Style_Guide/Overrides.tsx
Lights up the On this page link of the Style Guide section in view, on desktop.
Lights up the On this page link of the section in view, on desktop.
Turns the card grids into swipe rows that snap on phones and sets the list indent and spacing.
Styles the job CMS Body, turns the hero facts into a two-column grid on phones, tints the Other Open Roles cards on hover and snaps their phone swipe row.
Integration/Overrides.tsx
Styles the integration CMS Body, lifts the More Integrations cards on hover and keeps the highlight and More Integrations cards equal in height, with phone swipe rows that snap.
Integrations/CodeWindow.tsx
The API code window in the developer card: the request and response in the system monospace font, with the lines typing in as it scrolls into view.
Integrations/Overrides.tsx
Turns the popular and category card grids into phone swipe rows that snap, with the cards in each row equal in height.
The hero coin stage follows the mouse: the halo, rings, orbit, coins and badges each move by their own range, on desktop.
The staking chart in the Why CRT card: the line draws and the area rises when the card scrolls into view.
Reveals the Why CRT cards, grows the vote bars, strikes the old fee and snaps the cards in the phone swipe row.
The Live Markets card: Trending, Top Gainers and New Listings tabs with their tables, sparklines and Trade and Buy links.
Home_2/RewardsCalculator.tsx
The CRT Rewards Calculator: pick a lock period and an amount to see the rewards; every value is a preset.
The testimonial slider in the Social Channels card: three stories that cross-fade, with arrows, dots and swipe.
The How to Buy hexagons and the contract address in the system monospace font.
Reveals the staking pools, builds the roadmap staircase, assembles the How to Buy hexagons, lifts the channel cards on hover and snaps the swipe rows.
Edit an effect
Select the layer and open its effect in the right panel to change the trigger, distance, duration and easing. Layers can use different effects per breakpoint, so check Tablet and Phone too.
Edit code
Open the file under Code in the Assets panel. An override is attached to a layer in its Code Overrides setting. Keep the forwardRef wrapper in every override: without it, appear effects on that layer never run on the live site.
Keep tickers seamless
A ticker repeats its own items, so add, remove or reorder items once: there is no second copy to keep in sync.
Respect reduced motion
Chrome/ReducedMotion in the Main Template makes Framer’s built-in loops, reveals and hovers respect the visitor’s reduced-motion setting on every page, its override keeps looping layers and the Home stats stack at rest and stops Slideshow auto-play, and the style in the site head does the same for CSS animations and transitions. Seventeen more code files check the setting themselves: the preloader is skipped, the menu transitions, stats bars, card hovers and cover zoom stay still, the reading bar is static, the roadmap bars and timeline line show filled, the API code lines show at once, and on Home 2 the hero parallax stays still while the charts, market rows, staking bars, staircase, hexagons and testimonial slider show in place. When you add a Loop effect, set withReducedMotionTree on its parent layer; in new code use the prefers-reduced-motion media query.
Edit an effect
Select the layer and open its effect in the right panel to change the trigger, distance, duration and easing. Layers can use different effects per breakpoint, so check Tablet and Phone too.
Edit code
Open the file under Code in the Assets panel. An override is attached to a layer in its Code Overrides setting. Keep the forwardRef wrapper in every override: without it, appear effects on that layer never run on the live site.
Keep tickers seamless
A ticker repeats its own items, so add, remove or reorder items once: there is no second copy to keep in sync.
Respect reduced motion
Chrome/ReducedMotion in the Main Template makes Framer’s built-in loops, reveals and hovers respect the visitor’s reduced-motion setting on every page, its override keeps looping layers and the Home stats stack at rest and stops Slideshow auto-play, and the style in the site head does the same for CSS animations and transitions. Seventeen more code files check the setting themselves: the preloader is skipped, the menu transitions, stats bars, card hovers and cover zoom stay still, the reading bar is static, the roadmap bars and timeline line show filled, the API code lines show at once, and on Home 2 the hero parallax stays still while the charts, market rows, staking bars, staircase, hexagons and testimonial slider show in place. When you add a Loop effect, set withReducedMotionTree on its parent layer; in new code use the prefers-reduced-motion media query.
4. Editing content
Most content is plain text and images you can edit right on the canvas. These parts need a few extra steps.
Services (CMS)
The Services collection feeds the Services page and one page per service at /service/your-slug. Fields: Name, Slug, Summary, Tab Label, Headline, Illustration, Illustration Alt Text, Feature 1–3, Order, Body, Stat 1–3 Value and Label, Feature 1–3 Detail, Available On, Best For and Fine Print. Lists sort by Order, lowest first, and the first one is the large featured card.
Blog Posts (CMS)
The Blog Posts collection feeds the Blog page and one page per post at /post/your-slug. Fields: Name, Slug, Excerpt, Cover, Cover Alt Text, Category, Author Name, Author Role, Author Avatar, Published Date, Read Time, Featured, Body, Takeaway 1–3 and Author Bio. Switch Featured on for the post that leads the Blog page; the grid lists posts by Published Date, newest first.
Jobs (CMS)
The Jobs collection feeds the open roles on the Careers page and one page per role at /job/your-slug. Fields: Name, Slug, Department, Location, Type, Salary, Summary, Posted Date, Order and Body; Department and Type are option fields. Lists sort by Order, lowest first, and each role page shows three other roles under Other Open Roles.
Integrations (CMS)
The Integrations collection feeds the Integrations page and one page per app at /integration/your-slug. Fields: Name, Slug, Category, Icon, Summary, Connection Type, Setup Time, Featured, Order, Feature 1–3 and Body; Category is an option field. Lists sort by Order, lowest first, Featured apps lead the Integrations page, and each app page shows three other apps under More Integrations.
Add a CMS item
Open the CMS, pick the collection and add an item. Fill in every required field, write the Body with headings, lists and links, and check the Slug: it becomes the page URL. Category is an option field (Market Insights, Security, Guides, Staking, DeFi, Company News).
FAQ
Select a Home/FAQ Item or FAQ/FAQ Item instance and edit its Question and Answer. To add a question, duplicate a closed item; its tap toggle comes with it.
Images
Select a layer to replace its image and write its alt text in the image settings, or leave it empty for decorative images. For CMS images, update the matching field (Illustration Alt Text, Cover Alt Text) when you replace one.
Forms
The Contact form (Full Name, Email Address, Phone Number, Subject, Message) and the CTA email forms (the shared CTA and its Home 2/CTA copy) are native Framer forms. Select a form and set Send To so submissions reach you; their success and error states live in Contact/Submit Button and Button/Submit Button.
SEO
Open a page’s settings to set its title and description. Site-wide defaults, the social image and the favicon live in Site Settings. Service pages build their title from the Name field.
Services (CMS)
The Services collection feeds the Services page and one page per service at /service/your-slug. Fields: Name, Slug, Summary, Tab Label, Headline, Illustration, Illustration Alt Text, Feature 1–3, Order, Body, Stat 1–3 Value and Label, Feature 1–3 Detail, Available On, Best For and Fine Print. Lists sort by Order, lowest first, and the first one is the large featured card.
Blog Posts (CMS)
The Blog Posts collection feeds the Blog page and one page per post at /post/your-slug. Fields: Name, Slug, Excerpt, Cover, Cover Alt Text, Category, Author Name, Author Role, Author Avatar, Published Date, Read Time, Featured, Body, Takeaway 1–3 and Author Bio. Switch Featured on for the post that leads the Blog page; the grid lists posts by Published Date, newest first.
Jobs (CMS)
The Jobs collection feeds the open roles on the Careers page and one page per role at /job/your-slug. Fields: Name, Slug, Department, Location, Type, Salary, Summary, Posted Date, Order and Body; Department and Type are option fields. Lists sort by Order, lowest first, and each role page shows three other roles under Other Open Roles.
Integrations (CMS)
The Integrations collection feeds the Integrations page and one page per app at /integration/your-slug. Fields: Name, Slug, Category, Icon, Summary, Connection Type, Setup Time, Featured, Order, Feature 1–3 and Body; Category is an option field. Lists sort by Order, lowest first, Featured apps lead the Integrations page, and each app page shows three other apps under More Integrations.
Add a CMS item
Open the CMS, pick the collection and add an item. Fill in every required field, write the Body with headings, lists and links, and check the Slug: it becomes the page URL. Category is an option field (Market Insights, Security, Guides, Staking, DeFi, Company News).
FAQ
Select a Home/FAQ Item or FAQ/FAQ Item instance and edit its Question and Answer. To add a question, duplicate a closed item; its tap toggle comes with it.
Images
Select a layer to replace its image and write its alt text in the image settings, or leave it empty for decorative images. For CMS images, update the matching field (Illustration Alt Text, Cover Alt Text) when you replace one.
Forms
The Contact form (Full Name, Email Address, Phone Number, Subject, Message) and the CTA email forms (the shared CTA and its Home 2/CTA copy) are native Framer forms. Select a form and set Send To so submissions reach you; their success and error states live in Contact/Submit Button and Button/Submit Button.
SEO
Open a page’s settings to set its title and description. Site-wide defaults, the social image and the favicon live in Site Settings. Service pages build their title from the Name field.
5. Adding a page
Every page uses the Main Template, which brings the glow, navigation, CTA and footer, so a new page only needs its own sections. Its Show CTA setting hides the shared CTA on a page (Home 2 uses its own Home 2/CTA instead).
Create the page
Add a page in the Pages panel. New pages use the Main Template by default.
Keep the four breakpoints (Desktop 1440, Laptop 1200, Tablet 810, Phone 390) so the page adapts like the others.
Set its title and description in the page settings.
Add the Nav Trigger
Add an empty frame at the top of the page, like the Nav Trigger frame on every other page, and give it the scroll section ID nav-trigger.
Select the page and pick that frame as its Nav Trigger in the Main Template settings.
The navigation now compacts once a visitor scrolls past it.
Show it in the menu
Open Nav/Navigation in the Main Template.
Switch the page’s Show control on, on both Nav/Menu and Nav/Mobile Menu, for example Show Changelog.
A page that has no Show control needs a new entry in the PAGES table of Nav/Menu.tsx.
Link it in the footer
Open Footer/Footer. Links to pages that are not built yet are hidden.
Show the link and point it at the new page, or duplicate a link in its column for a new one.
Check the links on Tablet and Phone too.
Create the page
Add a page in the Pages panel. New pages use the Main Template by default.
Keep the four breakpoints (Desktop 1440, Laptop 1200, Tablet 810, Phone 390) so the page adapts like the others.
Set its title and description in the page settings.
Add the Nav Trigger
Add an empty frame at the top of the page, like the Nav Trigger frame on every other page, and give it the scroll section ID nav-trigger.
Select the page and pick that frame as its Nav Trigger in the Main Template settings.
The navigation now compacts once a visitor scrolls past it.
Show it in the menu
Open Nav/Navigation in the Main Template.
Switch the page’s Show control on, on both Nav/Menu and Nav/Mobile Menu, for example Show Changelog.
A page that has no Show control needs a new entry in the PAGES table of Nav/Menu.tsx.
Link it in the footer
Open Footer/Footer. Links to pages that are not built yet are hidden.
Show the link and point it at the new page, or duplicate a link in its column for a new one.
Check the links on Tablet and Phone too.
Draft pages are left out of the published site, so make sure a page is not a draft before you link to it from the menu or the footer.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 189 184" xmlns="http://www.w3.org/2000/svg"><defs ><linearGradient id="gbPb4JY6k-177042060-linear-gradient" x1="-0.23" x2="1.22" y1="1.219748728431098" y2="-0.2098891568087543"><stop offset="0" stop-color="rgb(197, 156, 255)"/><stop offset="0.5158744951848401" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(197, 156, 255)"/></linearGradient><linearGradient id="LxgdyCqw1-177042060-linear-gradient" x1="-0.23" x2="1.22" y1="1.219748728431098" y2="-0.2098891568087543"><stop offset="0" stop-color="rgb(197, 156, 255)"/><stop offset="0.5158744951848401" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(197, 156, 255)"/></linearGradient><linearGradient id="E0DmtURCk-177042060-linear-gradient" x1="-0.45" x2="1.29" y1="-0.4499999999999998" y2="1.2899999999999998"><stop offset="0" stop-color="rgb(197, 156, 255)"/><stop offset="0.5252666459563011" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(197, 156, 255)"/></linearGradient><linearGradient id="wYbbNIM1D-177042060-linear-gradient" x1="-0.45" x2="1.29" y1="-0.4499999999999998" y2="1.2899999999999998"><stop offset="0" stop-color="rgb(197, 156, 255)"/><stop offset="0.5252666459563011" stop-color="rgb(255, 255, 255)"/><stop offset="1" stop-color="rgb(197, 156, 255)"/></linearGradient></defs><g d="M 88.502 0 L 29.5 29.5 L 0 88.501 L 59 59.001 L 88.502 0.001 Z M 88.5 177.001 L 147.501 147.501 L 177.002 88.5 L 118 118 Z M 0 88.5 L 29.504 147.504 L 88.502 177.001 L 59.004 118.003 Z M 88.5 0.001 L 117.997 59.011 L 177.001 88.502 L 147.498 29.51 L 88.5 0 Z" fill="transparent" height="177.00099999999998px" id="l5Wza5tc6" transform="translate(6 3)" width="177.00199999999995px"><path d="M 88.502 0 L 29.5 29.5 L 0 88.501 L 59 59.001 L 88.502 0.001 Z" fill="url(%23gbPb4JY6k-177042060-linear-gradient)" height="88.501px" id="gbPb4JY6k" width="88.50200000000001px"/><path d="M 0 88.501 L 59.001 59.001 L 88.502 0 L 29.5 29.5 Z" fill="url(%23LxgdyCqw1-177042060-linear-gradient)" height="88.50099999999998px" id="LxgdyCqw1" transform="translate(88.5 88.5)" width="88.50199999999995px"/><path d="M 0 0 L 29.504 59.004 L 88.502 88.501 L 59.004 29.503 Z" fill="url(%23E0DmtURCk-177042060-linear-gradient)" height="88.50099999999998px" id="E0DmtURCk" transform="translate(0 88.5)" width="88.50200000000001px"/><path d="M 0 0.001 L 29.497 59.011 L 88.501 88.502 L 58.998 29.51 L 0 0 Z" fill="url(%23wYbbNIM1D-177042060-linear-gradient)" height="88.502px" id="wYbbNIM1D" transform="translate(88.5 0)" width="88.50099999999998px"/></g></svg>)