[{"_1":2,"_365":-5,"_366":-5},"loaderData",{"_3":4},"routes/crawl.$id",{"_5":6,"_7":8},"crawlId","019b3a25-1e9f-7518-ab31-c746adb2fe41","initialJob",{"_9":10,"_11":12,"_13":14,"_15":14,"_16":17,"_12":354,"_355":14,"_356":357,"_108":358,"_359":360,"_361":-7,"_362":-7,"_363":-7,"_364":-7},"url","kitpro-mellio.webflow.io","status","error","completedPages",5,"totalPages","documents",[18,113,175,255,291],{"_9":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":31,"_95":96,"_101":102,"_103":104,"_108":-7,"_109":110,"_111":-7,"_112":-7},"https://kitpro-mellio.webflow.io/utilities/changelog","markdown","# Changelog\n\nThe version or release of the template\n\n#### Version 1.0.0\n\nInitial release of Mellio webflow template.","html","

Changelog

The version or release of the template

Version 1.0.0

Initial release of Mellio webflow template.

\n\n \n\n \n\n\n\n\n","summary","The changelog indicates the initial release of the Mellio webflow template, designated as Version 1.0.0.","links",[],"screenshot","https://storage.googleapis.com/firecrawl-scrape-media/screenshot-9b2bec6a-4c2d-42c6-b181-25cb58bd5b0e.png?GoogleAccessId=scrape-bucket-accessor%40firecrawl.iam.gserviceaccount.com&Expires=1766811895&Signature=OTnxCc9giRIdx1ImXnbvOTgovfGQqkLI9fb0V3N%2FRHhEgU4I1Yo%2FDpwrWkzOmyRTZCjGsUU1wuiaEbhO1XL9XHwdUCKeFGtAH24UeyNvgU63sooXSL3YSc2HkKBAnfw0wjyjqD3lJr6zu6GaSbAGXce2PrczGjpWLc1bhZGFQI5ngX0AkooM8b15eJqj%2BFevUF0MO6tjSoBqIEHzxvJ%2Bpa2xXsjqU9jIrlNFs5fEbWlj05GWg7xtF6hN6gWP2Oz%2FaGVHehysipwupRhu7gOn9dKEOvDZuc2DVQmWKMSq%2BOmgEulZs6ntCFTTgsZzgSqGcGOhR3O5CUtfbvppsZau8g%3D%3D","branding",{"_32":33,"_34":35,"_46":47,"_55":56,"_73":74,"_79":80,"_81":82,"_87":88,"_90":91},"colorScheme","light","fonts",[36,41,43],{"_37":38,"_39":40},"family","sans-serif","count",6,{"_37":42,"_39":14},"Poppins",{"_37":44,"_39":45},"Arial",1,"colors",{"_48":49,"_50":49,"_51":52,"_53":49,"_54":49},"primary","#000000","accent","background","#FFFFFF","textPrimary","link","typography",{"_57":58,"_60":61,"_67":68},"fontFamilies",{"_48":44,"_59":42},"heading","fontStacks",{"_62":63,"_59":64,"_65":66},"body",[44,38],[42,38],"paragraph",[42,38],"fontSizes",{"_69":70,"_71":70,"_62":72},"h1","172.8px","h2","38.4px","spacing",{"_75":76,"_77":78},"baseUnit",8,"borderRadius","0px","components",{},"images",{"_83":-5,"_84":85,"_86":-5},"logo","favicon","https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/689d5995dcd9544503672800_favicon.png","ogImage","__framework_hints",[89],"Webflow","confidence",{"_92":93,"_46":93,"_94":93},"buttons",0,"overall","metadata",{"_97":98,"_99":100,"_84":85},"title","Changelog - Mellio - Webflow HTML website template","description","The version or release of the template","scrollVideoUrl","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00pzsm3p/video.webm?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=5f51040907504b65b8a699862e24f22fe0e13b4a198a8428b25dfa42c432be23&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","scrollScreenshots",[105,106,107],"https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00pzsm3p/screenshot-0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=f0330814d39082f45c866d179af9090059ae5a4465e05d4c5794a84ada5a7ca2&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00pzsm3p/screenshot-1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=5f90da8094f4cd175d73cc5fadc81d252b07c7a75665f0596d27ee4777ef6ab0&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00pzsm3p/screenshot-2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=b319c1efa1d42dfda2831edcc1e3e555a9141f8d8e88b5a7d222b582f622caf1&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","contentSpec","visualSpec","{\n \"identity\": {\n \"hero_gesture\": \"The 'Void & Slab' technique: placing pristine, sharp-edged light content blocks directly onto a pure black infinite background with zero drop shadows or gradients.\",\n \"supporting_signatures\": [\n \"Stark monochrome high-contrast palette\",\n \"Geometric sans-serif typography with circular forms\",\n \"Strictly centered alignment for headers and key info\",\n \"Absence of decorative borders or strokes\"\n ],\n \"personality_in_five_words\": [\n \"utilitarian\",\n \"monolithic\",\n \"stark\",\n \"precise\",\n \"technical\"\n ]\n },\n \"color_system\": {\n \"section_by_section_backgrounds\": \"Global Background: Pure Black (#000000) → Content Cards/Islands: Off-White/Light Gray (#F5F5F5)\",\n \"background_rule\": \"The page canvas must ALWAYS be pure black. Content is contained within solid light-colored blocks (slabs) rather than floating directly on black, except for the main page title.\",\n \"text_color_rule\": \"On Black Background: Pure White (#FFFFFF). On Light Cards: Dark Charcoal/Black (#111111) for headers, Dark Gray (#333333) for body.\",\n \"accent_rule\": \"Use color ONLY for interactive states (links/buttons); keeping the core interface strictly grayscale.\",\n \"temperature\": \"neutral\"\n },\n \"typography_system\": {\n \"display_classification\": {\n \"serif_or_sans\": \"sans-serif\",\n \"case\": \"sentence-case\",\n \"weight\": \"regular\",\n \"width\": \"normal\",\n \"character\": \"geometric and mechanical\"\n },\n \"display_rule\": \"Headlines float freely on the black background above the content card. Use a large, geometric sans-serif (resembling DM Sans or Gilroy).\",\n \"body_rule\": \"Regular weight, standard line-height (1.5), centered alignment. Inside cards, text should be darker grey, not pure black.\",\n \"hierarchy_contrast\": \"extreme\",\n \"special_techniques\": [\n \"Subtitles placed directly under headlines with significantly smaller scale (0.3x of headline)\"\n ]\n },\n \"imagery_system\": {\n \"treatment_rule\": \"No border radius (0px) or extremely subtle (2px). No drop shadows. Images should appear as flat layers.\",\n \"placement_rule\": \"Images should be contained within the 'light slabs' or span the full width of the container if breaking the void.\",\n \"text_image_relationship\": \"SEPARATED\",\n \"photography_direction\": \"High contrast, studio lighting, minimal distraction. If color is used, it should be isolated against the monochrome environment.\",\n \"illustration_style\": null\n },\n \"shape_and_space_system\": {\n \"corner_rule\": \"Strictly sharp (0px) for major content containers (cards).\",\n \"shape_vocabulary\": [\n \"Rectangular slabs\",\n \"Solid blocks\",\n \"Linear dividers\"\n ],\n \"spacing_philosophy\": {\n \"between_sections\": \"generous (80-120px)\",\n \"within_sections\": \"balanced\",\n \"overall_feel\": \"A clean, functional dashboard aesthetic with breathing room.\"\n },\n \"layout_structure\": \"Single column, centrally aligned max-width container (approx 800-1000px) holding the content cards.\",\n \"decorative_elements\": null\n },\n \"interactive_elements\": {\n \"button_style\": {\n \"shape\": \"sharp rectangle\",\n \"fill\": \"solid fill\",\n \"color_rule\": \"Inverted from container (Black button on white card, White button on black background)\"\n },\n \"link_style\": \"Simple underline or bold text weight change.\",\n \"card_style\": \"Flat off-white (#F5F5F5) background, sharp corners, NO shadow, NO border. The contrast against the black background defines the edge.\"\n },\n \"motion_and_animation\": {\n \"inferred_motion_style\": \"none/minimal\",\n \"likely_animated_elements\": [\n \"Subtle fade-in on load for the content card\"\n ],\n \"confidence\": \"medium\"\n },\n \"transfer_blueprint\": {\n \"non_negotiables\": [\n \"MUST use pure black (#000000) as the global page background\",\n \"Content containers MUST be flat, light-colored slabs without drop shadows\",\n \"Typography MUST be geometric sans-serif\",\n \"Layout MUST maintain a strict central axis for headers\",\n \"NEVER use gradients on backgrounds\",\n \"NEVER use rounded corners > 4px (keep it sharp/industrial)\",\n \"Text contrast MUST be maximized (White on Black, Black on White)\",\n \"Maintain the 'Void' aesthetic—do not fill the black space with decorative patterns\"\n ],\n \"flexible_elements\": [\n \"The specific off-white shade of the content cards (can be pure white or very light grey)\",\n \"The use of accent colors for links (can remain monochrome or introduce a brand color)\",\n \"Text alignment inside the cards (can be left-aligned if content is long)\",\n \"The exact font family (as long as it remains geometric sans)\"\n ],\n \"build_recipe\": [\n \"Set the HTML body background to #000000.\",\n \"Select a geometric sans-serif font family (e.g., DM Sans, Inter, Gilroy).\",\n \"Create a centralized container with a max-width of ~900px.\",\n \"Place the Page Title and Subtitle directly on the black background in white text.\",\n \"Create a content div with a light gray (#F5F5F5) background.\",\n \"Remove all border-radius and box-shadows from this content div.\",\n \"Pad the content div generously (60px+).\",\n \"Place body content inside the light div using dark text.\"\n ],\n \"do_not\": [\n \"Do not add drop shadows to the cards; the high contrast is the only separation needed.\",\n \"Do not use serif fonts; it destroys the technical/industrial vibe.\",\n \"Do not crowd the layout; the black 'void' is part of the design.\",\n \"Do not use rounded corners on the main content slabs.\"\n ],\n \"common_mistakes_to_avoid\": [\n \"Using a dark grey background instead of pure black (reduces impact).\",\n \"Making the content card too narrow, losing the 'slab' feel.\",\n \"Using low-contrast gray text on the black background (must be white).\"\n ]\n }\n}","recordingError","visualSpecError",{"_9":114,"_20":115,"_22":116,"_24":117,"_26":118,"_28":124,"_30":125,"_95":157,"_101":160,"_103":161,"_108":-7,"_109":174,"_111":-7,"_112":-7},"https://kitpro-mellio.webflow.io/utilities/style-guide","# Style guide\n\nStandards and guidelines of this template.\n\nTheme style\n\n[Color](https://kitpro-mellio.webflow.io/utilities/style-guide#color-guide) [Typography](https://kitpro-mellio.webflow.io/utilities/style-guide#typo-guide) [Button](https://kitpro-mellio.webflow.io/utilities/style-guide#button-guide)\n\nColor style\n\nWhitesmoke\n\n#F5F5F5\n\nBlack\n\n#000000\n\nAlmost Black\n\n#111111\n\nGrey\n\n#9E9E9E\n\nLight Grey\n\n#D1D1D1\n\nWhite\n\n#FFFFFF\n\nDark Grey\n\n#5D5D5D\n\nTypography style\n\n# H1- Aa Bb Cc\n\nHeading 1\n\nPoppins- 500 Medium\n\nSize 13 VW\n\nHeight 11.5 VW\n\n## H2- Aa Bb Cc\n\nHeading 2\n\nPoppins - 500 Medium\n\nSize 6 VW\n\nHeight 6 VW\n\n### H3- Aa Bb Cc\n\nHeading 3\n\nPoppins - 500 Medium\n\nSize 4 VW\n\nHeight 4.5 VW\n\n#### H4- Aa Bb Cc\n\nHeading 4\n\nPoppins - 500 Medium\n\nSize 2.5 VW\n\nHeight 3 VW\n\n##### H5- Aa Bb Cc\n\nHeading 5\n\nPoppins - 500 Medium\n\nSize 2 VW\n\nHeight 2.5 VW\n\n###### H6- Aa Bb Cc\n\nHeading 6\n\nPoppins - 500 Medium\n\nSize 1.3 VW\n\nHeight 1.7 VW\n\nRich text typography\n\n# H1\n\n## H2\n\n### H3\n\n#### H4\n\n##### H5\n\n###### H6\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\n\n> Block quote\n\nOrdered list\n\n1. Item 1\n2. Item 2\n3. Item 3\n\nUnordered list\n\n- Item A\n- Item B\n- Item C\n\n[Text link](https://university.webflow.com/lesson/add-and-nest-text-links-in-webflow)\n\n**Bold text**\n\n_Emphasis_\n\nSuperscript\n\nSubscript\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/688d868d66a7e607688a6da4_img2.webp)\n\nButton\n\nBasic Button\n\n[Button Text](https://kitpro-mellio.webflow.io/utilities/style-guide#)","

Style guide

Standards and guidelines of this template.

Color style

Whitesmoke

#F5F5F5

Black

#000000

Almost Black

#111111

Grey

#9E9E9E

Light Grey

#D1D1D1

White

#FFFFFF

Dark Grey

#5D5D5D

Typography style

H1- Aa Bb Cc

Heading 1

Poppins- 500 Medium

Size 13 VW

Height 11.5 VW

H2- Aa Bb Cc

Heading 2

Poppins - 500 Medium

Size 6 VW

Height 6 VW

H3- Aa Bb Cc

Heading 3

Poppins - 500 Medium

Size 4 VW

Height 4.5 VW

H4- Aa Bb Cc

Heading 4

Poppins - 500 Medium

Size 2.5 VW

Height 3 VW

H5- Aa Bb Cc

Heading 5

Poppins - 500 Medium

Size 2 VW

Height 2.5 VW

H6- Aa Bb Cc

Heading 6

Poppins - 500 Medium

Size 1.3 VW

Height 1.7 VW

Rich text typography

H1

H2

H3

H4

H5

H6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Button

Basic Button

Button Text

\n\n \n\n \n\n\n\n\n","The content provides a comprehensive style guide for a design template, detailing the color palette and typography styles. Color guidelines include shades such as Whitesmoke, Black, and Grey, each with specific hex codes. Typography is defined using the Poppins font in various sizes for headings (H1 to H6), emphasizing readability and structure. The document includes examples of rich text formatting, such as quotes, lists, and links. Overall, the guide serves as a resource for maintaining consistency in design.",[119,120,121,122,123],"https://kitpro-mellio.webflow.io/utilities/style-guide#color-guide","https://kitpro-mellio.webflow.io/utilities/style-guide#typo-guide","https://kitpro-mellio.webflow.io/utilities/style-guide#button-guide","https://university.webflow.com/lesson/add-and-nest-text-links-in-webflow","https://kitpro-mellio.webflow.io/utilities/style-guide#","https://storage.googleapis.com/firecrawl-scrape-media/screenshot-5058ee6d-b750-4ef4-8963-86a710ab84a7.png?GoogleAccessId=scrape-bucket-accessor%40firecrawl.iam.gserviceaccount.com&Expires=1766811897&Signature=EKYrHhjr5xM2vluZecvehETTT96anRs9yhq%2BGPEw0cMvw4yAcx11awosMZDqBaRG1f1xwLuOiYT%2FUYIx2gUZ1kustm9hN%2BGHSTDXBw9RMLCoNJShBqpGIqLeDuLoKT6SIxW%2BdE17aPWs0QjbHA7KN7PGcv953L88bjeWyLDK2rDLNGeJCXd7EQapv7gfRuKawhX1YZiFtroVoEAovYGIfpyMw9nyheYpHvRrrZtcEZtCG9PQLSJoItTFSmEfhTafaxQ9G88xLx5T5Wn49trDWwGft7oWMONf8%2FsXkP3EXfxhkDLBD5mMEN2m0I0uuydBuYG%2Fj1MyJiooJFdnCiQSVQ%3D%3D",{"_32":33,"_34":126,"_46":132,"_55":133,"_73":141,"_79":142,"_81":143,"_87":144,"_145":146,"_90":156},[127,129,131],{"_37":38,"_39":128},26,{"_37":42,"_39":130},20,{"_37":44,"_39":40},{"_48":49,"_50":49,"_51":52,"_53":49,"_54":49},{"_57":134,"_60":135,"_67":139},{"_48":44,"_59":42},{"_62":136,"_59":137,"_65":138},[44,38],[42,38],[42,38],{"_69":70,"_71":140,"_62":72},"115.2px",{"_75":76,"_77":78},{},{"_83":-5,"_84":85,"_86":-5},[89],"__llm_button_reasoning",{"_48":147,"_154":155,"_90":93},{"_148":149,"_150":151,"_152":153},"index",-1,"text","N/A","reasoning","LLM failed","secondary",{"_148":149,"_150":151,"_152":153},{"_92":93,"_46":93,"_94":93},{"_97":158,"_99":159,"_84":85},"Style Guide - Mellio - Webflow HTML website template","Standard and guidelines for this template.","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00qgcdd3/video.webm?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=3f88e8517fcd1ece4497447e55e74e2d765ac5eac5769ee1704b401160ca5f9c&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",[162,163,164,165,166,167,168,169,170,171,172,173],"https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00qgcdd3/screenshot-0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=9269fc750578594d688778f4761c836b94c5202443ca7086dd825d8458fcd111&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00qgcdd3/screenshot-1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=2c36921b9cb0f7b58c98c05935242cd4ee71ef17613b58bbf532bf71f9359132&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00qgcdd3/screenshot-2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=7fe7cf2c30614e5639db0c623e62d5121e1de304e6e13ecfeea3d753c44b027e&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00qgcdd3/screenshot-3.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=8eea3d510054c547c7740fdedc7360b1126549587ee370ac94c4c149c339f6f7&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00qgcdd3/screenshot-4.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=e41cb77e6ebe03829e4b57189db6bb1439335bdc05e6cfa51f5cb0e40c959b2e&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00qgcdd3/screenshot-5.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=aebab225b972e402a022f9b372d2892a2c9d612e970dfa7c507d72daf12702db&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00qgcdd3/screenshot-6.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=f6abfbddc97041500c74e3d4aa14e216742a12127d865761f0adb26a0447d461&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00qgcdd3/screenshot-7.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=2b38629fb78e3f42b25d90e0aa5e6d85c9de29ade3fd71b2512a6af76ec5e8ad&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00qgcdd3/screenshot-8.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=cd38f916aced1dfcaf1f63a1885f560ef76919dafe6ca56bb73ac2a92753150f&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00qgcdd3/screenshot-9.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=3965a7fde29f24f2fc8f7252a6737c89502fd7138eebb4212b881b208a18bccc&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00qgcdd3/screenshot-10.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=c4c8c845caca0d710ddb23fce642c6a9090ae0b6bb50729c0b63a7d4b29ded4e&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00qgcdd3/screenshot-11.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=ce130b6fdeebe1a83d485e37c742f9c3c96186c6e6bb9236f938d376dec80dc6&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","{\n \"identity\": {\n \"hero_gesture\": \"Architectural, viewport-relative typography (defined in VW units) structured by rigorous 1px horizontal dividers.\",\n \"supporting_signatures\": [\n \"Monochromatic starkness (Pure Black #000000 background)\",\n \"Geometric sans-serif typography (Poppins) used at uniform 500 weight\",\n \"Negative leading on large headlines (tight vertical stacking)\",\n \"Zero-radius, sharp-edged containers and active states\"\n ],\n \"personality_in_five_words\": [\n \"Mathematical\",\n \"Scalable\",\n \"Brutalist\",\n \"Precision\",\n \"Systematic\"\n ]\n },\n \"color_system\": {\n \"section_by_section_backgrounds\": \"Global: Pure Black (#000000) for all main content and navigation areas.\",\n \"background_rule\": \"Solid flat colors only. No gradients, no blurs. Contrast is achieved through shape and dark-gray highlights (#333333) rather than color shifts.\",\n \"text_color_rule\": \"Primary text: White (#FFFFFF). Secondary/Labels: White or extremely light gray. Inversion is not present; maintain light-on-dark polarity exclusively.\",\n \"accent_rule\": \"Accents are strictly monochromatic (dark grays). Color is reserved NEVER for structure, potentially only for image content.\",\n \"temperature\": \"neutral\"\n },\n \"typography_system\": {\n \"display_classification\": {\n \"serif_or_sans\": \"sans-serif\",\n \"case\": \"sentence-case\",\n \"weight\": \"regular\",\n \"width\": \"normal\",\n \"character\": \"geometric and mechanical (Poppins)\"\n },\n \"display_rule\": \"Responsive Scaling is MANDATORY. Font sizes are defined in Viewport Width (VW). H1 = ~13VW, H2 = ~6VW. Leading tightens as scale increases (H1 line-height is 0.88x font-size).\",\n \"body_rule\": \"Medium weight (500), standard line-height for readability (approx 1.5), left-aligned, high contrast white on black.\",\n \"hierarchy_contrast\": \"extreme\",\n \"special_techniques\": [\n \"Horizontal 1px white line separators between hierarchy levels\",\n \"Viewport-based sizing units (VW) instead of pixels or rems\",\n \"Negative leading on display text\"\n ]\n },\n \"imagery_system\": {\n \"treatment_rule\": \"Zero border radius (sharp corners). No shadows, no borders, no decorative effects. Images are treated as raw rectangular blocks.\",\n \"placement_rule\": \"Grid-adherent. Images sit plainly within the layout flow or fill their container width completely.\",\n \"text_image_relationship\": \"SEPARATED\",\n \"photography_direction\": \"Minimalist, high-contrast, desaturated or neutral tones to match the stark UI environment.\",\n \"illustration_style\": \"null\"\n },\n \"shape_and_space_system\": {\n \"corner_rule\": \"Strict 0px radius on everything—images, buttons, active states, and containers.\",\n \"shape_vocabulary\": [\n \"Sharp rectangles\",\n \"Horizontal hairlines\"\n ],\n \"spacing_philosophy\": {\n \"between_sections\": \"moderate (40-60px)\",\n \"within_sections\": \"balanced\",\n \"overall_feel\": \"Structured grid defined by horizontal lines.\"\n },\n \"layout_structure\": \"Split layout capability (Sidebar + Content). Content area uses generous margins but strict left-alignment.\",\n \"decorative_elements\": [\n \"Full-width 1px horizontal dividers\"\n ]\n },\n \"interactive_elements\": {\n \"button_style\": {\n \"shape\": \"sharp rectangle\",\n \"fill\": \"solid fill\",\n \"color_rule\": \"Active states use a dark charcoal/grey (#333) background. Inactive states blend into the black background.\"\n },\n \"link_style\": \"Minimalist. Likely bolded white or simple underline. No vibrant hover colors.\",\n \"card_style\": \"null\"\n },\n \"motion_and_animation\": {\n \"inferred_motion_style\": \"smooth-and-subtle\",\n \"likely_animated_elements\": [\n \"Smooth scaling of typography when resizing browser (due to VW units)\"\n ],\n \"confidence\": \"medium\"\n },\n \"transfer_blueprint\": {\n \"non_negotiables\": [\n \"Typography sizes MUST be calculated in VW (Viewport Width) units\",\n \"Background MUST be #000000 (Pure Black)\",\n \"Font weight MUST be uniform (approx 500/Medium) for headings\",\n \"Corners MUST be sharp (0px radius)\",\n \"Line-height for display text MUST be tight (1.0 or less for H1/H2)\",\n \"Horizontal dividers MUST be used to separate content hierarchies\"\n ],\n \"flexible_elements\": [\n \"The specific sans-serif font (can be Inter or Helvetica, provided it is geometric/clean)\",\n \"Sidebar width\",\n \"Body text layout (columns vs single column)\"\n ],\n \"build_recipe\": [\n \"Set the global background to black #000.\",\n \"Import a geometric sans-serif font (e.g., Poppins).\",\n \"Establish a type scale using VW units (Start H1 at 13vw).\",\n \"Apply negative letter spacing or negative line height to the largest headlines.\",\n \"Draw 1px white horizontal lines between distinct sections.\",\n \"Ensure all interactable elements are sharp rectangles.\"\n ],\n \"do_not\": [\n \"NEVER use rounded corners.\",\n \"NEVER use drop shadows.\",\n \"NEVER use static pixel sizes for main headings.\",\n \"NEVER use serif fonts.\",\n \"NEVER use gradients.\"\n ],\n \"common_mistakes_to_avoid\": [\n \"Using standard line-heights on the massive H1 text (it will look too airy)\",\n \"Making the gray active states too light (reduces contrast with white text)\"\n ]\n }\n}",{"_9":176,"_20":177,"_22":178,"_24":179,"_26":180,"_28":195,"_30":196,"_95":228,"_101":231,"_103":232,"_108":-7,"_109":254,"_111":-7,"_112":-7},"https://kitpro-mellio.webflow.io","[![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/68994d38c18a9c82d7edc370_logo3.webp)](https://kitpro-mellio.webflow.io/)\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/689aa82f0cd5bdd9b67c71e5_burger.webp)\n\n(Menu)\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/688db8e6c4cd195a47dda535_close-line-icon.svg)\n\n(Close)\n\n[About](https://kitpro-mellio.webflow.io/#about-tag) [SERVICE](https://kitpro-mellio.webflow.io/#service) [Project](https://kitpro-mellio.webflow.io/#project) [Contact](https://kitpro-mellio.webflow.io/#cta)\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/688db8e6c4cd195a47dda539_img8.webp)\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/6896f469ce63e81f29ec98bf_img21.webp)![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/6890539966fcae4ee809de4a_img3.webp)![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/689053999e635744674452f5_img1.webp)![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/6896bf4295a13683cf7f8c22_img16.webp)![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/68906042834f67d66e506e42_img9.webp)![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/68905399b6a5de14a4528911_img5.webp)![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/688daf3972a24e04a6a98849_img4.webp)\n\nStudio specialized in crafting\n\nidentities and design strategy.\n\n# M e l l i o T M\n\n(Scroll)\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/689060422ce52119118a7df6_img12.webp)\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/68906042834f67d66e506e42_img9.webp)\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/68906041093a5e635a2c6bce_img13.webp)\n\nABOUT\n\n2018 - Present\n\nA\n\ns\n\na\n\np\n\na\n\ns\n\ns\n\ni\n\no\n\nn\n\na\n\nt\n\ne\n\nb\n\nr\n\na\n\nn\n\nd\n\ni\n\nn\n\ng\n\na\n\ng\n\ne\n\nn\n\nc\n\ny\n\n,\n\nw\n\ne\n\nb\n\nr\n\ni\n\nn\n\ng\n\nc\n\nr\n\ne\n\na\n\nt\n\ni\n\nv\n\ni\n\nt\n\ny\n\na\n\nn\n\nd\n\nt\n\ne\n\nc\n\nh\n\nn\n\ni\n\nc\n\na\n\nl\n\ne\n\nx\n\np\n\ne\n\nr\n\nt\n\ni\n\ns\n\ne\n\nt\n\no\n\ne\n\nv\n\ne\n\nr\n\ny\n\np\n\nr\n\no\n\nj\n\ne\n\nc\n\nt\n\n.\n\nP\n\nR\n\nO\n\nJ\n\nE\n\nC\n\nT\n\n(Drag-Click)\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/68905399fe3196fa992d86e2_img2.webp)\n\nChloe\n\nRebranding\n\nStrategy\n\nStorytelling\n\nSocial Media\n\n[(See Case)](https://kitpro-mellio.webflow.io/#1)\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/68905399b6a5de14a4528911_img5.webp)\n\nPugilist\n\nGuidelines\n\nStrategy\n\nDirection\n\nDevelopment\n\n[(See Case)](https://webflow.com/templates/designers/kitpro-studio)\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/689060423ca4b93428c83ebe_img8.webp)\n\nTealist\n\nBranding\n\nStrategy\n\nDirection\n\nSocial Media\n\n[(See Case)](https://webflow.com/templates/designers/kitpro-studio)\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/689053999e635744674452f5_img1.webp)\n\nPottern\n\nInfographic\n\nInteractive\n\nAdvertising\n\nCopywriting\n\n[(See Case)](https://webflow.com/templates/designers/kitpro-studio)\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/689060423ca4b93428c83eb9_img10.webp)\n\nVanos\n\nIllustration\n\nStrategy\n\nConsultation\n\nSocial Media\n\n[(See Case)](https://webflow.com/templates/designers/kitpro-studio)\n\nWEBSITE\n\nWEBSITE\n\nWEBSITE\n\nWEBSITE\n\nWEBSITE\n\nWEBSITE\n\nWEBSITE\n\nWEBSITE\n\nWEBSITE\n\nBRANDING\n\nBRANDING\n\nBRANDING\n\nBRANDING\n\nBRANDING\n\nBRANDING\n\nBRANDING\n\nBRANDING\n\nBRANDING\n\nGRAPHIC\n\nGRAPHIC\n\nGRAPHIC\n\nGRAPHIC\n\nGRAPHIC\n\nGRAPHIC\n\nGRAPHIC\n\nGRAPHIC\n\nGRAPHIC\n\nSERVICE\n\nF\n\nr\n\no\n\nm\n\ns\n\nt\n\nr\n\na\n\nt\n\ne\n\ng\n\ny\n\na\n\nn\n\nd\n\np\n\no\n\ns\n\ni\n\nt\n\ni\n\no\n\nn\n\ni\n\nn\n\ng\n\nt\n\no\n\nd\n\ne\n\ns\n\ni\n\ng\n\nn\n\na\n\nn\n\nd\n\na\n\nc\n\nt\n\ni\n\nv\n\na\n\nt\n\ni\n\no\n\nn\n\n,\n\nw\n\ne\n\ns\n\nh\n\na\n\np\n\ne\n\ne\n\nv\n\ne\n\nr\n\ny\n\ne\n\nl\n\ne\n\nm\n\ne\n\nn\n\nt\n\nt\n\no\n\nr\n\ne\n\nf\n\nl\n\ne\n\nc\n\nt\n\ny\n\no\n\nu\n\nr\n\nv\n\na\n\nl\n\nu\n\ne\n\ns\n\n,\n\ns\n\np\n\na\n\nr\n\nk\n\nr\n\ne\n\nc\n\no\n\ng\n\nn\n\ni\n\nt\n\ni\n\no\n\nn\n\n,\n\na\n\nn\n\nd\n\ni\n\nn\n\ns\n\np\n\ni\n\nr\n\ne\n\nt\n\nr\n\nu\n\ns\n\nt\n\n.\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/6896bf4295a13683cf7f8c22_img16.webp)\n\nWebsite Design\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/689060422ce52119118a7df6_img12.webp)\n\nArt Direction\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/6896bfb1d95cefa72ace6bbd_img17.webp)\n\nBrand Identity\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/6896c4c66e1507b9b706d26c_img18.webp)\n\nMarket Analytics\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/6896c56f01083c43ed7756c5_img19a.webp)\n\nPersonal Branding\n\nOUR PROOF\n\nOur work speaks for itself. Backed by successful projects, measurable results, and long-term client partnerships, we prove our value through creativity that performs and strategies that deliver. Every brand we build is a testament to our commitment, expertise, and vision.\n\n90%\n\nClient Satisfaction\n\n87+\n\nYearly Client Growth\n\n21K\n\nProject Completed\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/689d8101402c61b56d1ac691_img22.webp)\n\nJames Calvin\n\nOwner of Digipug\n\nGREAT SERVICE\n\n\"This team transformed our brand from an idea into a powerful identity. Their attention to detail and creative insight helped us stand out.\"\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/689d81011363a31404fcf6ba_img23.webp)\n\nJoshua Graham\n\nDigital Network Analyst\n\nQUICK PROGRESS\n\n\"Working with them was like unlocking the next level of our business. They understood our vision and turned it into something.\"\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/689d81019217c80e71593f9b_img24.webp)\n\nAndrew Fisher\n\nUser Interface Designer\n\nTOP DEDICATION\n\n\"From strategy to execution, they delivered beyond expectations. The brand they created feels authentic, modern, and perfectly aligned with our goals.\"\n\nchevron\\_left\n\nchevron\\_right\n\n[arrow\\_forward](https://webflow.com/templates/designers/kitpro-studio)\n\n![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/6896f469493ebb9b8fe5abdb_img20.webp)\n\nCONTACT\n\nL\n\nE\n\nT\n\n'\n\nS\n\nT\n\nA\n\nL\n\nK\n\nMonday - Saturday 8AM to 9PM\n\n+1 (123) 456-7890\n\ninfo@company.com\n\n[![](https://cdn.prod.website-files.com/656d40b910a373d6938abb78/65780f7610d265c8f9df1e89_meta-black-icon.png)](https://about.meta.com/)[![](https://cdn.prod.website-files.com/656d40b910a373d6938abb78/65780f76adf8bcc6d7c816c9_tumblr.png)](https://www.tumblr.com/)[![](https://cdn.prod.website-files.com/656d40b910a373d6938abb78/65780f76b9c3563f9e7680dc_dribble.png)](https://dribbble.com/)\n\nMellio by [Kitpro](https://webflow.com/templates/designers/kitpro-studio)\n\nPowered by [Webflow](https://webflow.com/)\n\nLinks\n\n[About](https://kitpro-mellio.webflow.io/#about-wrap) [Project](https://kitpro-mellio.webflow.io/#project) [Service](https://kitpro-mellio.webflow.io/#service)\n\nUtilities\n\n[Style Guide](https://kitpro-mellio.webflow.io/utilities/style-guide) [License](https://kitpro-mellio.webflow.io/utilities/license) [Changelog](https://kitpro-mellio.webflow.io/utilities/changelog) [Instruction](https://kitpro-mellio.webflow.io/utilities/instruction)\n\n[![](https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/68994d38c18a9c82d7edc370_logo3.webp)](https://kitpro-mellio.webflow.io/)","

$\"\"$ $\"\"$ $\"\"$ $\"\"$ $\"\"$ $\"\"$ $\"\"$

Studio specialized in crafting
identities and design strategy.

M
e
l
l
i
o
T
M

(Scroll)

$\"\"$

ABOUT

2018 - Present

(Drag-Click)

$\"\"$

Chloe

Rebranding

Strategy

Storytelling

Social Media

(See Case)

$\"\"$

Pugilist

Guidelines

Strategy

Direction

Development

(See Case)

$\"\"$

Tealist

Branding

Strategy

Direction

Social Media

(See Case)

$\"\"$

Pottern

Infographic

Interactive

Advertising

Copywriting

(See Case)

$\"\"$

Vanos

Illustration

Strategy

Consultation

Social Media

(See Case)

WEBSITE

BRANDING

GRAPHIC

SERVICE

$\"\"$

Website Design

$\"\"$

Art Direction

$\"\"$

Brand Identity

$\"\"$

Market Analytics

$\"\"$

Personal Branding

OUR PROOF

Our work speaks for itself. Backed by successful projects, measurable results, and long-term client partnerships, we prove our value through creativity that performs and strategies that deliver. Every brand we build is a testament to our commitment, expertise, and vision.

90%

Client Satisfaction

87+

Yearly Client Growth

21K

Project Completed

$\"\"$

James Calvin

Owner of Digipug

GREAT SERVICE

\"This team transformed our brand from an idea into a powerful identity. Their attention to detail and creative insight helped us stand out.\"

$\"\"$

Joshua Graham

Digital Network Analyst

QUICK PROGRESS

\"Working with them was like unlocking the next level of our business. They understood our vision and turned it into something.\"

$\"\"$

Andrew Fisher

User Interface Designer

TOP DEDICATION

\"From strategy to execution, they delivered beyond expectations. The brand they created feels authentic, modern, and perfectly aligned with our goals.\"

chevron_left

chevron_right

arrow_forward

$\"\"$

CONTACT

Monday - Saturday 8AM to 9PM

+1 (123) 456-7890

info@company.com

\n\n \n\n \n\n\n\n\n","Mellio is a creative branding agency established in 2018 that emphasizes using creativity and technical expertise in all projects. The agency specializes in identity and design strategy to help brands reflect their values and inspire trust. Their services range from website design and branding to market analytics and personal branding. Success is evidenced by high client satisfaction rates and project completion stats. Client testimonials highlight the agency's transformative impact on brands, showcasing their dedication to delivering authentic and modern identities.",[181,182,183,184,185,186,187,188,189,190,191,192,114,193,19,194],"https://kitpro-mellio.webflow.io/","https://kitpro-mellio.webflow.io/#about-tag","https://kitpro-mellio.webflow.io/#service","https://kitpro-mellio.webflow.io/#project","https://kitpro-mellio.webflow.io/#cta","https://kitpro-mellio.webflow.io/#1","https://webflow.com/templates/designers/kitpro-studio","https://about.meta.com/","https://www.tumblr.com/","https://dribbble.com/","https://webflow.com/","https://kitpro-mellio.webflow.io/#about-wrap","https://kitpro-mellio.webflow.io/utilities/license","https://kitpro-mellio.webflow.io/utilities/instruction","https://storage.googleapis.com/firecrawl-scrape-media/screenshot-d1a3528c-2ae5-47b4-bc38-ab6ef31eb7e7.png?GoogleAccessId=scrape-bucket-accessor%40firecrawl.iam.gserviceaccount.com&Expires=1766811886&Signature=K6IVU7h2zlcqZuDCEURCQW1tesExtgf3HNJhrG2r2o%2FHAoUd3oqpvnCfgQSVWJpUC%2BEdoMQnONqopQ%2BBwNFnIuNj%2BZ%2Fke6j0jzrneHn5iKJpfcGoeB6hGSgej2WDQFcP%2BjeYVslRXA7CVON%2BFQkIa0RB0PIGmoJ3HpHtkrCA9PQIBsYZCmoBGUUK9%2FWe4aBqJ7nA4m%2B2GiogRmmuhtjywxRDiCYNxh0KK%2BcljqwyY%2BGPc6%2BUKjoJHmXXJgmpyoMWr9U6J%2FWMeSXfB7TuhMqDgE3JVxReq7V68P7PyGGigk8Z7M%2FREL7ip1OImlSOAae1%2FfD5R2SEZ6e8DO6eal0PuA%3D%3D",{"_32":33,"_34":197,"_46":204,"_55":205,"_73":214,"_79":215,"_81":216,"_87":218,"_219":220,"_145":224,"_90":227},[198,200,202],{"_37":38,"_39":199},39,{"_37":44,"_39":201},24,{"_37":42,"_39":203},15,{"_48":49,"_50":49,"_51":52,"_53":49,"_54":49},{"_57":206,"_60":207,"_67":211},{"_48":44,"_59":42},{"_62":208,"_59":209,"_65":210},[44,38],[42,38],[44,38],{"_69":212,"_71":212,"_62":213},"249.6px","14px",{"_75":76,"_77":78},{},{"_83":217,"_84":85,"_86":-5},"https://cdn.prod.website-files.com/688d868d66a7e607688a6d94/68994d38c18a9c82d7edc370_logo3.webp",[89],"__llm_logo_reasoning",{"_221":93,"_152":222,"_90":223},"selectedIndex","Strong indicators: header logo linking to homepage, header location, visible, top-left position, highest logo on page, src contains logo, class contains logo, reasonable size. Score: 122 (clear winner by 122 points)",0.9,{"_48":225,"_154":226,"_90":93},{"_148":149,"_150":151,"_152":153},{"_148":149,"_150":151,"_152":153},{"_92":93,"_46":93,"_94":93},{"_97":229,"_99":230,"_84":85},"Mellio - Webflow HTML website template","Discover Mellio, a versatile Webflow landing page template designed for personal portfolio. With its sleek, modern design, Mellio offers a seamless user experience for showcasing your skills and projects.","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/video.webm?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=3d14c0e0b75ec642f5e37c06ec11eb73d4349a68b4716bc72b2e6e15610b54ea&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",[233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253],"https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=a4c052cecb2e66a0bfb31ed2ca6f6fd1bb7af5c47a208428dcf1bf93186ecf87&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=7292464b5854f73da103f8936c981cd25c7a0e78b70bfe2b578ffa610cff64a4&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=265cf151c77f46a29327d7f721759960d0a858766dc97e4fef71629ad9c2dfbd&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-3.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=c4d543323a04ba9a1106804fdb704bd4db3f330ec55074063a4506a6cc7afc22&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-4.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=ded00608202693ac3aa9e524ddc312655a943d69f84e7daedda96662510a10c3&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-5.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=d96bec37a004c3e296b94720ac95d31f14259f329ca3835c059909e78bc4ea46&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-6.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=533cbc1ad8de888a4d0aff5afe8e2593b6122f60a8eac70ce3337a29b0cf81fc&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-7.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=d3bb06f07a564b60b84f2c9a8e2eb8ada69fe5d596498e57a87d40fb260b2a0d&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-8.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=396df746614e336b37af3647f5fe96e10844b3e2c97e6c777f8635af9e17ab37&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-9.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=32c1e90b46d543e4d7093e31f715f42e0dc1fee04149a332c7218b4c6216754a&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-10.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=a6e934799a12c4dda14870491f5391fb34ef2b5195e988214ecd644e5c26e9a7&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-11.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=5eeec4aeb9eca391a323bd2c150c802099fd6b9dd52fd1faf06ae724f8d19e68&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-12.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=8ef8599e05d0dae45131e2b7756f4f5a5a66a20ec03235c40a0501b72e20ea9d&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-13.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=04424eb787104427c145c15678aaa38eed00aa466e5dd4852866ad2844f76dc8&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-14.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=78d64467b72c6932a37a7f0d69dfa2fdc76442af44e9360c4b52af1ff1dd2f2b&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-15.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=4a136e9a441c4fe1c28937cb7b4fd378b540b266852a9851a5ced351de460d3f&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-16.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=1b4414890e1160ae6254b6d652c822dda03c31f4e7e60eb936713e8df68e7e94&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-17.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=7719b99a03a36a98397d89a910119405d121826c711f9da3b5664133bfd5c75f&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-18.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=1fb6a74b65dd90bde5f8e4824d4068534e73bf0e7c9297aad2d2281a63a476f8&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-19.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=7e3e4ea841010e0eb8d39d3e4793aa0082671927896ce5a9f65d4074a550e8b2&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00at7m8r/screenshot-20.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=7c25a670a07fb2f7c1fdd0210133f7c958d583864df53998938e5a0496d96ce0&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","{\n \"identity\": {\n \"hero_gesture\": \"Monolithic Dark Mode Typography: The design relies on the extreme contrast of massive, architectural sans-serif text against a pure black void.\",\n \"supporting_signatures\": [\n \"Stacked all-caps marquees with diamond separators\",\n \"High-contrast split-screen layouts (50/50 text vs image)\",\n \"Micro-labeling (tiny all-caps headers) vs Macro-display (huge headers)\",\n \"Low-key, moody photography that blends into the black background\"\n ],\n \"personality_in_five_words\": [\n \"Stoic\",\n \"Cinematic\",\n \"Precision\",\n \"Monochromatic\",\n \"Imposing\"\n ]\n },\n \"color_system\": {\n \"section_by_section_backgrounds\": \"Global: Pure Black (#000000) for all sections. Cards/Overlays: Dark Charcoal (#1A1A1A).\",\n \"background_rule\": \"The canvas is relentlessly Deep Black (#000000). There are no distinct colored sections; structure is created through negative space and subtle dark grey containers.\",\n \"text_color_rule\": \"Primary text is Pure White (#FFFFFF). Secondary text/labels are Light Grey (#CCCCCC). Darker Grey (#666666) is used for inactive states or subtle borders.\",\n \"accent_rule\": \"NEVER use color accents. The design is strictly grayscale. Contrast is the only accent.\",\n \"temperature\": \"neutral\"\n },\n \"typography_system\": {\n \"display_classification\": {\n \"serif_or_sans\": \"sans-serif\",\n \"case\": \"mixed\",\n \"weight\": \"regular\",\n \"width\": \"normal\",\n \"character\": \"geometric and mechanical\"\n },\n \"display_rule\": \"Display text operates at two extremes: 'Architectural' (viewport-filling, often all-caps) or 'Utilitarian' (tiny, 10-12px all-caps labels).\",\n \"body_rule\": \"Regular weight, high legibility, generous line-height (1.5), usually limited to max-width 40-50ch for reading comfort.\",\n \"hierarchy_contrast\": \"extreme\",\n \"special_techniques\": [\n \"Continuous scrolling marquees (Marquee)\",\n \"Diamond (◆) glyphs used as separators in headlines\",\n \"Stacked headlines with tight leading (lines touching)\",\n \"Giant oversized numbers for statistics\"\n ]\n },\n \"imagery_system\": {\n \"treatment_rule\": \"Images are treated as 'windows' in the dark void. Edges are sharp or micro-rounded (2-4px). Overlays are heavy to ensure text legibility.\",\n \"placement_rule\": \"Rigid grid alignment. Images often occupy a full 50% of the screen width or appear as contained aspect-ratio cards.\",\n \"text_image_relationship\": \"ADJACENT\",\n \"photography_direction\": \"Cinematic low-key lighting. Subjects emerging from shadow. Desaturated or cool-toned. High contrast but dark.\",\n \"illustration_style\": \"null\"\n },\n \"shape_and_space_system\": {\n \"corner_rule\": \"Predominantly sharp corners. Interactives and cards may have micro-rounding (2-4px). Navigation buttons are perfect squares.\",\n \"shape_vocabulary\": [\n \"Rectangles\",\n \"Squares\",\n \"Diamonds (as text separators)\"\n ],\n \"spacing_philosophy\": {\n \"between_sections\": \"generous (80-120px)\",\n \"within_sections\": \"balanced\",\n \"overall_feel\": \"Museum-like emptiness focusing attention on specific artifacts.\"\n },\n \"layout_structure\": \"Left-aligned typography. Asymmetric grid (often 1/3 text to 2/3 space, or 50/50 split).\",\n \"decorative_elements\": [\n \"Diamond glyphs\",\n \"Square navigation containers\",\n \"Horizontal rules (hairline separators)\"\n ]\n },\n \"interactive_elements\": {\n \"button_style\": {\n \"shape\": \"sharp rectangle\",\n \"fill\": \"solid fill\",\n \"color_rule\": \"White background with Black icon/text for primary interactions. Ghost/Outline for secondary.\"\n },\n \"link_style\": \"Text links are understated, likely underlined on hover or denoted by position in the grid.\",\n \"card_style\": \"Dark Grey (#1A1A1A or #222) background, subtle separation from black canvas, sharp or 2px radius.\"\n },\n \"motion_and_animation\": {\n \"inferred_motion_style\": \"smooth-and-subtle\",\n \"likely_animated_elements\": [\n \"Infinite horizontal scroll (marquee text)\",\n \"Parallax on background images\",\n \"Fade-in/Slide-up for text elements on scroll\"\n ],\n \"confidence\": \"high\"\n },\n \"transfer_blueprint\": {\n \"non_negotiables\": [\n \"Background MUST remain pure black (#000) throughout the entire experience.\",\n \"Typography MUST alternate between massive display sizes and tiny utility labels.\",\n \"Photography MUST be low-key/dark to blend with the background.\",\n \"NEVER use vibrant accent colors for buttons or text.\",\n \"Layouts MUST utilize substantial negative space; avoid clutter.\",\n \"Headings in marquees MUST be all-caps and separated by geometric shapes.\",\n \"Contrast MUST be maintained via White text on Black backgrounds (no mid-tones for body copy).\"\n ],\n \"flexible_elements\": [\n \"The specific sans-serif font family (as long as it is geometric)\",\n \"The aspect ratio of image cards\",\n \"The speed of the marquee animations\",\n \"The specific shade of dark grey for content cards\"\n ],\n \"build_recipe\": [\n \"Set the global background to #000000.\",\n \"Select a geometric sans-serif typeface (e.g., Inter, Helvetica, DM Sans).\",\n \"Define two primary header styles: 'Giant' (64px+) and 'Label' (12px, tracking +100).\",\n \"Create a library of 'dark mode' images or apply a CSS filter (brightness: 0.8) to standard images.\",\n \"Build a marquee component that supports stacked, all-caps text.\",\n \"Design a split-screen grid system for desktop viewports.\",\n \"Use pure white (#FFF) for all primary readable text.\",\n \"Implement square white buttons with black arrows for navigation controls.\"\n ],\n \"do_not\": [\n \"DO NOT use gradients or drop shadows.\",\n \"DO NOT use a light mode or white background sections.\",\n \"DO NOT use serif typography (unless strictly for a specific pull quote, but generally avoid).\",\n \"DO NOT crowd elements; if it feels empty, it is correct.\"\n ],\n \"common_mistakes_to_avoid\": [\n \"Making the 'grey' cards too light, reducing the moody atmosphere.\",\n \"Not making the 'Giant' text big enough to create the necessary architectural drama.\",\n \"Using colorful photography that clashes with the monochrome UI.\"\n ]\n }\n}",{"_9":193,"_20":256,"_22":257,"_24":258,"_26":259,"_28":263,"_30":264,"_95":283,"_101":285,"_103":286,"_108":-7,"_109":290,"_111":-7,"_112":-7},"# License\n\nAll graphical assets in this template are licensed for personal and commercial use. If you’d like to use a specific asset, please check the license below.\n\n##### Image License\n\nAll images featured in this template are licensed for both personal and commercial use at no cost. If you wish to use a particular image, you can review the licenses and download them for free from [Lummi.ai](https://www.lummi.ai/) , [Freepik](https://www.freepik.com/) and [Unsplash](https://unsplash.com/).","

License

All graphical assets in this template are licensed for personal and commercial use. If you’d like to use a specific asset, please check the license below.

Image License

All images featured in this template are licensed for both personal and commercial use at no cost. If you wish to use a particular image, you can review the licenses and download them for free from Lummi.ai , Freepik and Unsplash.

\n\n \n\n \n\n\n\n\n","All graphical assets in the template are available for personal and commercial use at no cost. Users can check specific asset licenses and download images for free from Lummi.ai, Freepik, and Unsplash.",[260,261,262],"https://www.lummi.ai/","https://www.freepik.com/","https://unsplash.com/","https://storage.googleapis.com/firecrawl-scrape-media/screenshot-85a96ec6-9d30-4b96-919b-57d84ec78337.png?GoogleAccessId=scrape-bucket-accessor%40firecrawl.iam.gserviceaccount.com&Expires=1766811895&Signature=oxkyzzZuX4a4Yq6TEeVjU9Rl6zWDFm3%2B2T5ZTFY0AJVdDNxen6kzcQDVt72hmWoP11P5lgYovsJf1xEQexnLu2ymu%2BhWnfD0ltzb%2FntcjtYmXcUpL84iOrdsuZnVWAtr53NtREd8sFWxi2P7PPXNsIbhJ4iV3abDq1%2FgbwICU3g9ewiPpROJmdRRNN81zj1ZdVrGUcBJuQPcsnWCdJs2vKwJZFif1fASk0gb0YvoSt8W89CVfugyllAJuK64AvmbDM8a3o1iwelljZuHblIkoOoFsFRmyZebBm1oqPVwEfp654OEBfP0SSZF1r2sz0WNH8DqPFnDBnXohbNqLBYQdQ%3D%3D",{"_32":33,"_34":265,"_46":270,"_55":271,"_73":278,"_79":279,"_81":280,"_87":281,"_90":282},[266,268,269],{"_37":38,"_39":267},9,{"_37":42,"_39":76},{"_37":44,"_39":45},{"_48":49,"_50":49,"_51":52,"_53":49,"_54":49},{"_57":272,"_60":273,"_67":277},{"_48":44,"_59":42},{"_62":274,"_59":275,"_65":276},[44,38],[42,38],[42,38],{"_69":70,"_71":70,"_62":72},{"_75":76,"_77":78},{},{"_83":-5,"_84":85,"_86":-5},[89],{"_92":93,"_46":93,"_94":93},{"_97":284,"_99":159,"_84":85},"License - Mellio - Webflow HTML website template","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00cbbmo8/video.webm?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=8a49786f960242d66c5dee316ddc9d5ef889c1d2ddbee9ef7304aded91a89571&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",[287,288,289],"https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00cbbmo8/screenshot-0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=d5b4b944c26787696affb6b3f8bb90c6d0383dd97c0c5869b7c1f10233c1625a&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00cbbmo8/screenshot-1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=0bc6d4f83430547faead1573808b8ee8535148e598457e4a9e6a497b047cc143&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00cbbmo8/screenshot-2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=f21c55768c7fc1a9b141aa123e2fc812f768f781581cb98945f3244c2b606045&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","{\n \"identity\": {\n \"hero_gesture\": \"Structural minimalism that uses razor-thin horizontal dividers and a strict two-column grid to organize content, floating in a void-like high-contrast space.\",\n \"supporting_signatures\": [\n \"Stark black-and-white high contrast palette\",\n \"Asymmetrical 'definition list' layouts (Label left, Content right)\",\n \"Oversized section headlines with tight letter spacing\"\n ],\n \"personality_in_five_words\": [\n \"Clinical\",\n \"Stark\",\n \"Informational\",\n \"Precise\",\n \"Monolithic\"\n ]\n },\n \"color_system\": {\n \"section_by_section_backgrounds\": \"Global: Deep Black (#000000)\",\n \"background_rule\": \"Solid flat color only. No gradients, no textures. The page acts as a seamless void.\",\n \"text_color_rule\": \"Primary text is Pure White (#FFFFFF). Secondary text (if present) should remain high contrast (e.g., #CCCCCC) but the screenshot indicates a preference for uniform white brightness.\",\n \"accent_rule\": \"NEVER used for decoration. If used, reserved strictly for functional interaction states.\",\n \"temperature\": \"neutral\"\n },\n \"typography_system\": {\n \"display_classification\": {\n \"serif_or_sans\": \"sans-serif\",\n \"case\": \"sentence-case\",\n \"weight\": \"bold\",\n \"width\": \"normal\",\n \"character\": \"geometric and functional\"\n },\n \"display_rule\": \"Headlines are large, bold, and tight. They act as anchors for the section. Sentence case implies a conversational but authoritative tone.\",\n \"body_rule\": \"Regular weight, high legibility. In 'list' layouts, the label (left) matches the body size/weight of the content (right), relying on position rather than style for hierarchy.\",\n \"hierarchy_contrast\": \"moderate\",\n \"special_techniques\": [\n \"Bold inline text for emphasis/links instead of color\",\n \"Structural alignment (grid) used to denote hierarchy instead of font size changes\"\n ]\n },\n \"imagery_system\": {\n \"treatment_rule\": \"Images, if present, should follow the strict geometry of the text: sharp corners (0px radius), no shadows, no borders.\",\n \"placement_rule\": \"Images likely span full column widths or align strictly with the grid lines defined by the text dividers.\",\n \"text_image_relationship\": \"SEPARATED\",\n \"photography_direction\": null,\n \"illustration_style\": null\n },\n \"shape_and_space_system\": {\n \"corner_rule\": \"Sharp corners (0px) everywhere. The aesthetic is rectilinear and architectural.\",\n \"shape_vocabulary\": [\n \"Horizontal lines (hairlines)\",\n \"Rectangular blocks of negative space\"\n ],\n \"spacing_philosophy\": {\n \"between_sections\": \"moderate (40-60px)\",\n \"within_sections\": \"balanced\",\n \"overall_feel\": \"Structured open space held together by grid lines.\"\n },\n \"layout_structure\": \"Content is organized into horizontal bands separated by full-width 1px lines. Within bands, a 2-column structure prevails: a narrow 'label' column on the left (approx 25-30%) and a wide 'content' column on the right.\",\n \"decorative_elements\": [\n \"Full-width horizontal dividers (1px white line)\"\n ]\n },\n \"interactive_elements\": {\n \"button_style\": {\n \"shape\": \"sharp rectangle\",\n \"fill\": \"outline/ghost\",\n \"color_rule\": \"White border, white text, transparent fill (inferred from minimalist style)\"\n },\n \"link_style\": \"Links are indicated by increased font weight (Bold) rather than color or underlines. They blend seamlessly into the paragraph block.\",\n \"card_style\": null\n },\n \"motion_and_animation\": {\n \"inferred_motion_style\": \"smooth-and-subtle\",\n \"likely_animated_elements\": [\n \"Horizontal dividers expanding from 0% to 100% width on scroll\",\n \"Text fading in slightly upon entering viewport\"\n ],\n \"confidence\": \"medium\"\n },\n \"transfer_blueprint\": {\n \"non_negotiables\": [\n \"ALWAYS use a pure black (#000) background with pure white (#fff) text.\",\n \"NEVER use rounded corners on containers or dividers.\",\n \"MUST use horizontal lines to separate semantic groupings.\",\n \"Typography MUST be sans-serif and sentence case.\",\n \"Layout MUST align to a strict grid; do not center-align body text.\",\n \"Links within text MUST be denoted by weight (bold), not color.\",\n \"Maintain high contrast; avoid low-contrast grey text.\"\n ],\n \"flexible_elements\": [\n \"The specific sans-serif font family (as long as it is geometric/clean)\",\n \"The vertical spacing between the label and the divider\",\n \"The exact width ratio of the left/right columns (can be 30/70 or 40/60)\"\n ],\n \"build_recipe\": [\n \"Set the global background to #000000.\",\n \"Select a high-quality, geometric sans-serif font family.\",\n \"Create a container with a max-width for readability but keep dividers full-width relative to that container.\",\n \"Define sections using 1px solid white horizontal borders.\",\n \"Layout content using a CSS Grid or Flexbox row: Label on the left, Description on the right.\",\n \"Style headlines in sentence case, bold, and tight tracking.\",\n \"Ensure all links inside paragraphs are styled as 'font-weight: bold; color: inherit;'.\"\n ],\n \"do_not\": [\n \"Do NOT use colored backgrounds or gradients.\",\n \"Do NOT use drop shadows.\",\n \"Do NOT center-align paragraphs; keep them left-aligned for the grid structure.\",\n \"Do NOT use decorative icons; let the typography and lines do the work.\",\n \"Do NOT use serif fonts.\"\n ],\n \"common_mistakes_to_avoid\": [\n \"Making the horizontal lines too thick (keep them 1px or 0.5px)\",\n \"Reducing contrast by making the text grey instead of white\",\n \"Cluttering the negative space with unnecessary borders or boxes\"\n ]\n }\n}",{"_9":194,"_20":292,"_22":293,"_24":294,"_26":295,"_28":296,"_30":297,"_95":315,"_101":318,"_103":319,"_108":-7,"_109":353,"_111":-7,"_112":-7},"# Instruction\n\nGuide for Mellio Webflow Template\n\n## GSAP Guide\n\nEvery GSAP code used on this template is here. How to edit them and find them is explain on this page. In every code block on this page, we added additional explanation to help you understand everything.\n\nYou can find the code in (Site settings) Footer Code.\n\n#### Lenis Smooth Scroll\n\n**Lenis Smooth Scroll** is a lightweight JavaScript library that enables buttery-smooth, hardware-accelerated scrolling for websites. It works by intercepting the browser’s native scroll behavior and applying eased, customizable motion, creating a more fluid and refined browsing experience. Lenis supports vertical and horizontal scroll, inertia effects, and syncs seamlessly with animations from libraries like GSAP or ScrollTrigger.\n\n```javascript\n\n\n```\n\n#### Hero Section GSAP Animation\n\nGSAP animation featuring random splitText with blur effect and expanding flickering background image.\n\n```javascript\n\n```\n\n#### About Section GSAP Animation\n\nGSAP animation with splitText effect to reveal a paragraph in random letter sequences, tailored with CSS to fix the word wrapping issue that cause the text to not breaking properly when GSAP splitText used on long paragraph. Also featuring trail image that follow the cursor while user navigate the section.\n\n```javascript\n\n\n\n```\n\n#### Project Section GSAP Animation\n\nFeaturing GSAP animation of revealing card of image in random angle of (-20, 20) with drag and click interaction, clicking the image will expand it and revealing project information with spiltText effect. clicking fully expanded card will return card to original size and location before dragging with new random angle.\n\n```javascript\n\n```\n\n#### Service Section GSAP Animation\n\nFeaturing draggable slider using GSAP animation and GSAP Counter Text that easier to modify.\n\n```javascript\n\n```\n\n#### Testimonial Section GSAP Animation\n\nFeaturing testimonial slider using GSAP animation. Using button as navigation and will bounce when start or end slider is reached.\n\n```javascript\n\n```\n\n#### Testimonial Section GSAP Animation\n\nFeaturing testimonial slider using GSAP animation. Using button as navigation and will bounce when start or end slider is reached.\n\n```javascript\n\n```\n\n#### CTA Section GSAP Animation\n\nFeaturing splitText animation for some text element in CTA section(Following cursor button is not GSAP animation).\n\n```javascript\n\n```","

Instruction

Guide for Mellio Webflow Template

GSAP Guide

Every GSAP code used on this template is here. How to edit them and find them is explain on this page. In every code block on this page, we added additional explanation to help you understand everything.

You can find the code in (Site settings) Footer Code.

Lenis Smooth Scroll

Lenis Smooth Scroll is a lightweight JavaScript library that enables buttery-smooth, hardware-accelerated scrolling for websites. It works by intercepting the browser’s native scroll behavior and applying eased, customizable motion, creating a more fluid and refined browsing experience. Lenis supports vertical and horizontal scroll, inertia effects, and syncs seamlessly with animations from libraries like GSAP or ScrollTrigger.

<script src=\"https://unpkg.com/lenis@1.3.1/dist/lenis.min.js\"></script> \n<script>\n  \n// lenis smooth scroll\n  \n{\n  let lenis;\n\n  const initScroll = () => {\n    lenis = new Lenis({});\n    lenis.on(\"scroll\", ScrollTrigger.update);\n    gsap.ticker.add((time) => lenis.raf(time * 1000));\n    gsap.ticker.lagSmoothing(0);\n  };\n\n  function initGsapGlobal() {\n    \n    /** Do everything that needs to happen\n     *  before triggering all\n     * the gsap animations */\n\n    initScroll();\n\n    // match reduced motion media\n    // const media = gsap.matchMedia();\n\n    /** Send a custom\n     *  event to all your\n     * gsap animations\n     * to start them */\n\n    const sendGsapEvent = () => {\n      window.dispatchEvent(\n        new CustomEvent(\"GSAPReady\", {\n          detail: {\n            lenis,\n          },\n        })\n      );\n    };\n\n    // Check if fonts are already loaded\n    \n    if (document.fonts.status === \"loaded\") {\n      sendGsapEvent();\n    } else {\n      document.fonts.ready.then(() => {\n        sendGsapEvent();\n      });\n    }\n\n    /** We need specific handling because the\n     * grid/list changes the scroll height of the whole container\n     */\n\n    let resizeTimeout;\n    const onResize = () => {\n      clearTimeout(resizeTimeout);\n      resizeTimeout = setTimeout(() => {\n        ScrollTrigger.refresh();\n      }, 50);\n    };\n\n    window.addEventListener(\"resize\", () => onResize());\n    const resizeObserver = new ResizeObserver((entries) => onResize());\n    resizeObserver.observe(document.body);\n\n    queueMicrotask(() => {\n      gsap.to(\"[data-start='hidden']\", {\n        autoAlpha: 1,\n        duration: 0.1,\n        delay: 0.2,\n      });\n    });\n  }\n\n  // this only for dev\n  \n  const documentReady =\n    document.readyState === \"complete\" || document.readyState === \"interactive\";\n\n  if (documentReady) {\n    initGsapGlobal();\n  } else {\n    addEventListener(\"DOMContentLoaded\", (event) => initGsapGlobal());\n  }\n}\n\n</script>\n

Hero Section GSAP Animation

GSAP animation featuring random splitText with blur effect and expanding flickering background image.

<script>\n\n// -----HERO SECTION------\n  \n// ---Hero title animation--- \n  \nconst split = new SplitText(\".hero-title\", { type: \"chars\" });\n\n// Set initial opacity to 0 for all characters\n  \ngsap.set(split.chars, { \n  opacity: 0, \n  filter : \"blur(1vw)\"\n});\n\n  // Animate characters in\ngsap.to(split.chars, {\n  opacity: 1,\n  filter : \"blur(0vw)\",\n  duration: 1,\n    stagger: {\n    each: 0.8 / split.chars.length,\n    from: \"random\"\n  },\n  ease: \"power2.out\"\n});\n// END hero title animation'\n  \n  \n// Hero Image Flicker\n  document.addEventListener(\"DOMContentLoaded\", () => {\n  const frame = document.querySelector(\".background-image-frame\");\n  const images = gsap.utils.toArray(\".hero-background-image\");\n\n  // Show first image initially\n  gsap.set(images, { autoAlpha: 0 });\n  gsap.set(images[0], { autoAlpha: 1 });\n\n  // ---- Animation 1: Image sequence ----\n  gsap.to(images, {\n    delay: 0.75, // wait before animation starts\n    autoAlpha: 1,\n    duration: 0.15,\n    stagger: { each: 0.15, from: \"start\" },\n    ease: \"power1.inOut\",\n    onStart: () => {\n      // Hide first image just before starting sequence\n      gsap.set(images[0], { autoAlpha: 0 });\n    },\n    onComplete: () => {\n      gsap.set(images.slice(0, -1), { autoAlpha: 0 });\n      gsap.set(images[images.length - 1], { autoAlpha: 1 });\n    }\n  });\n\n  // ---- Animation 2: Frame growth ----\n  gsap.set(frame, { width: \"20vw\", height: \"20vw\" });\n  gsap.to(frame, {\n    delay: 0.75, // same delay\n    width: \"100vw\",\n    height: \"100vh\",\n    duration: 2,\n    ease: \"power2.inOut\"\n  });\n});\n// END Hero Image Flicker\n\n</script>\n

About Section GSAP Animation

GSAP animation with splitText effect to reveal a paragraph in random letter sequences, tailored with CSS to fix the word wrapping issue that cause the text to not breaking properly when GSAP splitText used on long paragraph. Also featuring trail image that follow the cursor while user navigate the section.

<style>\n/* SplitText character style Bug fix for word wrapping */\n    .split-about-word {\n    display: inline-block;\n    white-space: normal;\n    word-break: normal;\n  }\n\n  .split-about-char {\n    display: inline-block;\n    white-space: normal;\n    word-break: normal;\n  }\n\n  /* Ensure parent allows wrapping to fix splittext Bug*/\n  .medium-text.about-text {\n    white-space: normal !important;\n    overflow-wrap: break-word;\n    word-wrap: break-word;\n      \n  }\n</style>\n\n<script>\n\n// -----ABOUT SECTION------\n  \n// about text animation\n\n\n// Create SplitText instance\nconst splitAbout = new SplitText(\".medium-text.about-text\", {\n  type: \"words,chars\",\n  charsClass: \"split-about-char\",\n  wordsClass: \"split-about-word\"\n});\n\n// Set initial styles\ngsap.set(splitAbout.chars, {\n  opacity: 0,\n  filter: \"blur(1vw)\"\n});\n\n// Animate on scroll in and reverse on scroll out (up)\nScrollTrigger.create({\n  trigger: \".section-main.about-section\",\n  start: \"top top\",\n  end: \"bottom top\",\n  onEnter: () => {\n    gsap.to(splitAbout.chars, {\n      opacity: 1,\n      filter: \"blur(0vw)\",\n      duration: 1,\n      stagger: {\n        each: 0.8 / splitAbout.chars.length,\n        from: \"random\"\n      },\n      ease: \"power2.out\"\n    });\n  },\n  onLeaveBack: () => {\n    gsap.to(splitAbout.chars, {\n      opacity: 0,\n      filter: \"blur(1vw)\",\n      duration: 0.5,\n      \n      stagger: {\n        each: 0.8 / splitAbout.chars.length,\n        from: \"random\"\n      },\n      ease: \"power2.in\"\n    });\n  }\n});\n// END about text animation\n// about image trail\n  const trailEls = gsap.utils.toArray(\".trail-image-wrap\");\nlet imgIndex = 0;\nlet mouse = { x: 0, y: 0 };\nlet lastMouse = { x: 0, y: 0 };\nlet smoothed = { x: 0, y: 0 };\nconst threshold = 130;\n\n// Capture mouse position\nwindow.addEventListener(\"mousemove\", (e) => {\n  mouse.x = e.clientX;\n  mouse.y = e.clientY;\n});\n\n// Distance check\nconst getDistance = (a, b) => {\n  const dx = a.x - b.x;\n  const dy = a.y - b.y;\n  return Math.sqrt(dx * dx + dy * dy);\n};\n\nfunction animate() {\n  smoothed.x += (mouse.x - smoothed.x) * 0.15;\n  smoothed.y += (mouse.y - smoothed.y) * 0.15;\n\n  const dist = getDistance(mouse, lastMouse);\n\n  if (dist > threshold) {\n    showNextImage(smoothed.x, smoothed.y);\n    lastMouse.x = mouse.x;\n    lastMouse.y = mouse.y;\n  }\n\n  requestAnimationFrame(animate);\n}\n\nfunction showNextImage(x, y) {\n  const el = trailEls[imgIndex % trailEls.length];\n  imgIndex++;\n\n  gsap.killTweensOf(el);\n\n  // Determine size based on viewport\n  let imgSize = \"15vw\";\n  if (window.innerWidth >= 256 && window.innerWidth <= 428) {\n    imgSize = \"30vw\";\n  }\n\n  // Bring it to the front\n  gsap.set(el, {\n    x: x,\n    y: y,\n    width: \"0vw\",\n    height: \"0vw\",\n    opacity: 0,\n    zIndex: imgIndex // increase with each image\n  });\n\n  // Animate in\n  gsap.to(el, {\n    duration: 0.4,\n    ease: \"power3.out\",\n    opacity: 1,\n    width: imgSize,\n    height: imgSize,\n    x: x,\n    y: y,\n    scale: 1\n  });\n\n  // Animate out\n  gsap.to(el, {\n    delay: 0.75,\n    duration: 0.7,\n    ease: \"power2.inOut\",\n    opacity: 0,\n    width: \"0vw\",\n    height: \"0vw\",\n    scale: 0.3\n  });\n}\n\nanimate(); // Start the loop\n// END about image trail\n\n</script>\n

Project Section GSAP Animation

Featuring GSAP animation of revealing card of image in random angle of (-20, 20) with drag and click interaction, clicking the image will expand it and revealing project information with spiltText effect. clicking fully expanded card will return card to original size and location before dragging with new random angle.

<script>\n\n// -----PROJECT SECTION------  \n \n// DRAGGABLE Project\ndocument.querySelectorAll('#container-draggable .drag-image').forEach((el, index) => {\n\t// Set initial opacity and scale using GSAP (no need for random positioning anymore)\n  gsap.set(el, {\n    opacity: 0,  // Start with opacity 0\n    scale: 0.9,  // Start with scale 0.9\n    rotation: gsap.utils.random(-20, 20)  // Optional: add random rotation for variety\n  });\n\n  // Create timeline for the appearance animation\n  const appearTimeline = gsap.timeline({ paused: true });\n\n  appearTimeline.to(el, {\n    opacity: 1, // Fade in to opacity 1\n    scale: 1,   // Scale up to normal size\n    rotation: gsap.utils.random(-20, 20), // Random rotation for variety\n    duration: 1, // Duration of the appearance animation\n    ease: \"back.out(1.7)\" // Bounce ease for that small bounce effect\n  });\n\n  // ScrollTrigger to start the animation when the container comes into view\n  ScrollTrigger.create({\n    trigger: el,\n    start: \"top 80%\",\n    once: true,\n    onEnter: () => {\n      gsap.delayedCall(index * 0.2, () => { // Staggered start for each element\n        appearTimeline.play();\n      }); \n\n      // Re-enable Draggable after the animation starts\n      Draggable.create(el, {\n        bounds: \"#container-draggable\",\n        inertia: true,\n        type: \"x,y\",\n        edgeResistance: 0.9,\n        throwProps: true,\n        throwResistance: 3000,\n        zIndexBoost: false\n      });\n      \n // 👇 Add toggle-expand interaction\nlet isExpanded = false; // Track expanded state\ngsap.set(el, { filter: \"brightness(100%)\" });\n\nel.addEventListener(\"click\", () => {\n  if (!isExpanded) {\n    // Expand to full screen\n    gsap.to(el, {\n      width: \"100vw\",\n      height: \"100vh\",\n      x: \"0%\",\n      y: \"0%\",\n      filter: \"brightness(75%)\",\n      top: \"0%\",\n      left: \"0%\",\n      bottom: \"auto\",\n      right: \"auto\",\n      position: \"absolute\",\n      margin: 0,\n      zIndex: 90,\n      rotation: 0,\n      duration: 0.6,\n      ease: \"power3.inOut\"\n    });\n  } else {\n    // Shrink back — decide size dynamically based on current viewport\n    let targetWidth = \"20vw\";\n    let targetHeight = \"20vw\";\n\n    if (window.innerWidth >= 768 && window.innerWidth <= 1024) {\n      targetWidth = \"30vw\";\n      targetHeight = \"30vw\";\n    } else if (window.innerWidth >= 480 && window.innerWidth < 720) {\n      targetWidth = \"35vw\";\n      targetHeight = \"35vw\";\n    } else if (window.innerWidth >= 256 && window.innerWidth <= 428) {\n      targetWidth = \"65vw\";\n      targetHeight = \"65vw\";\n    }\n\n    gsap.to(el, {\n      width: targetWidth,\n      height: targetHeight,\n      position: \"absolute\",\n      filter: \"brightness(100%)\",\n      top: \"\",\n      left: \"\",\n      bottom: \"\",\n      right: \"\",\n      margin: \"auto\",\n      zIndex: 1,\n      rotation: gsap.utils.random(-20, 20), // Random rotation each time\n      duration: 0.6,\n      ease: \"power3.inOut\"\n    });\n  }\n\n  isExpanded = !isExpanded;\n});\n    }\n  });\n});\n  // END DRAGGABLE  \n  \n  // Dragable image reveal text\n\n // --- Hide all target texts on load ---\ndocument.querySelectorAll(\".drag-title, .drag-detail-service, .drag-case\").forEach((text) => {\n  gsap.set(text, { opacity: 1 });\n  text.style.visibility = \"hidden\";\n});\n\n// Store SplitText states\nconst splitTextStates = new Map();\n\ndocument.querySelectorAll(\".drag-image\").forEach((image) => {\n  image.addEventListener(\"click\", () => {\n    const card = image.closest(\".drag-card\");\n\n    // Select all text elements\n    const textElements = card.querySelectorAll(\".drag-title, .drag-detail-service, .drag-case\");\n    \n    // 👇 Get the corresponding drag-link inside this card\n    const dragLink = card.querySelector(\".drag-link\");\n\n    textElements.forEach((el) => {\n      const state = splitTextStates.get(el) || { active: false, split: null };\n\n      if (!state.active) {\n        el.style.visibility = \"visible\";\n\n        const split = new SplitText(el, {\n          type: \"chars\",\n          charsClass: \"split-char\"\n        });\n\n        splitTextStates.set(el, { split, active: true });\n\n        gsap.set(split.chars, {\n          opacity: 0,\n          filter: \"blur(1vw)\"\n        });\n\n        // 👇 Stagger logic\n        let staggerOptions;\n        if (el.classList.contains(\"drag-title\")) {\n          // Random for title\n          staggerOptions = {\n            each: 1 / split.chars.length,\n            from: \"random\"\n          };\n        } else {\n          // Left to right for detail-service and case\n          staggerOptions = 0.02;\n        }\n\t\t\n        gsap.to(split.chars, {\n          opacity: 1,\n          filter: \"blur(0vw)\",\n          duration: 1,\n          color: \"#FFFFFF\",\n          stagger: staggerOptions,\n          ease: \"power2.out\"\n        });\n\n        // 👇 Show the drag-link (link block)\n        if (dragLink) {\n          gsap.to(dragLink, {\n            opacity: 1,\n            pointerEvents: \"auto\",\n            duration: 0\n          });\n        }\n\n      } else {\n        gsap.to(el, {\n          opacity: 0,\n          duration: 0,\n          onComplete: () => {\n            state.split?.revert();\n            splitTextStates.set(el, { active: false, split: null });\n            el.style.visibility = \"hidden\";\n            gsap.set(el, { opacity: 1 });\n          }\n        });\n\n        // 👇 Hide the drag-link again\n        if (dragLink) {\n          gsap.to(dragLink, {\n            opacity: 0,\n            pointerEvents: \"none\",\n            duration: 0\n          });\n        }\n      }\n    });\n  });\n});\n// END Dragable image reveal text\n\n// LINK inside project card animation\n gsap.registerPlugin(TextPlugin);\n\ndocument.querySelectorAll(\".drag-case\").forEach((el) => {\n  const originalText = el.textContent;\n  let isTyping = false; // 🔐 flag to prevent repeat typing\n\n  el.addEventListener(\"mouseenter\", () => {\n    if (isTyping) return; // ✅ Skip if already typing\n\n    isTyping = true;\n    el.textContent = \"\";\n\n    gsap.to(el, {\n      duration: 1,\n      text: originalText,\n      ease: \"none\",\n      onComplete: () => {\n        isTyping = false; // ✅ allow replay next time\n      }\n    });\n  });\n\n  el.addEventListener(\"mouseleave\", () => {\n    // Optional: reset text if you want to replay each hover\n    // el.textContent = originalText;\n    // isTyping = false;\n  });\n});\n\n//END LInk inside project animation\n\n\n</script>\n

Service Section GSAP Animation

Featuring draggable slider using GSAP animation and GSAP Counter Text that easier to modify.

<script>\n\n// -----SERVICE SECTION------  \n \n// Service slider  \ngsap.registerPlugin(Draggable);\n\nconst gallery = document.querySelector(\".service-gallery-slide\");\n\nDraggable.create(gallery, {\n  type: \"x\",\n  bounds: \".service-gallery\", // container element\n  inertia: true\n});\n// END Service slider\n  \n// Service Counter\n  gsap.registerPlugin(ScrollTrigger);\n\nScrollTrigger.create({\n  trigger: \".service-counter\",\n  start: \"top 80%\", // starts when the top of .service-counter is 80% down the viewport\n  once: true,       // run only once\n  onEnter: () => {\n    document.querySelectorAll(\".number\").forEach(counter => {\n      let finalValue = parseInt(counter.textContent, 10); // read existing number\n      gsap.fromTo(counter, \n        { innerText: 0 }, \n        {\n          innerText: finalValue,\n          duration: 2,\n          ease: \"power1.out\",\n          snap: { innerText: 1 }\n        }\n      );\n    });\n  }\n});\n\n// END Service Counter\n\n\n</script>\n

Testimonial Section GSAP Animation

Featuring testimonial slider using GSAP animation. Using button as navigation and will bounce when start or end slider is reached.

<script>\n\n// ----- Testimonial Section ------- \n  \n// Bouncy Slider for Testimonials\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  const track = document.querySelector(\".testimonial-track\");\n  const slides = document.querySelectorAll(\".single-testimonial\");\n  const prevBtn = document.querySelector(\".previous-button\");\n  const nextBtn = document.querySelector(\".next-button\");\n\n  let currentIndex = 0;\n  const totalSlides = slides.length;\n\n  function showSlide(index) {\n    gsap.to(track, {\n      x: `${-index * 100}%`,\n      duration: 0.6,\n      ease: \"power2.inOut\"\n    });\n  }\n\n  function bounce(direction) {\n    let overshoot = direction === \"next\" \n      ? (-currentIndex * 100 - 5) // bounce left\n      : (-currentIndex * 100 + 5); // bounce right\n\n    gsap.to(track, {\n      x: `${overshoot}%`,\n      duration: 0.3,\n      ease: \"power1.out\",\n      onComplete: () => {\n        gsap.to(track, {\n          x: `${-currentIndex * 100}%`,\n          duration: 0.4,\n          ease: \"power2.out\"\n        });\n      }\n    });\n  }\n\n  nextBtn.addEventListener(\"click\", () => {\n    if (currentIndex < totalSlides - 1) {\n      currentIndex++;\n      showSlide(currentIndex);\n    } else {\n      bounce(\"next\");\n    }\n  });\n\n  prevBtn.addEventListener(\"click\", () => {\n    if (currentIndex > 0) {\n      currentIndex--;\n      showSlide(currentIndex);\n    } else {\n      bounce(\"prev\");\n    }\n  });\n});\n// END Bouncy Slider for Testimonials   \n\n</script>\n

Testimonial Section GSAP Animation

Featuring testimonial slider using GSAP animation. Using button as navigation and will bounce when start or end slider is reached.

<script>\n\n// ----- Testimonial Section ------- \n  \n// Bouncy Slider for Testimonials\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  const track = document.querySelector(\".testimonial-track\");\n  const slides = document.querySelectorAll(\".single-testimonial\");\n  const prevBtn = document.querySelector(\".previous-button\");\n  const nextBtn = document.querySelector(\".next-button\");\n\n  let currentIndex = 0;\n  const totalSlides = slides.length;\n\n  function showSlide(index) {\n    gsap.to(track, {\n      x: `${-index * 100}%`,\n      duration: 0.6,\n      ease: \"power2.inOut\"\n    });\n  }\n\n  function bounce(direction) {\n    let overshoot = direction === \"next\" \n      ? (-currentIndex * 100 - 5) // bounce left\n      : (-currentIndex * 100 + 5); // bounce right\n\n    gsap.to(track, {\n      x: `${overshoot}%`,\n      duration: 0.3,\n      ease: \"power1.out\",\n      onComplete: () => {\n        gsap.to(track, {\n          x: `${-currentIndex * 100}%`,\n          duration: 0.4,\n          ease: \"power2.out\"\n        });\n      }\n    });\n  }\n\n  nextBtn.addEventListener(\"click\", () => {\n    if (currentIndex < totalSlides - 1) {\n      currentIndex++;\n      showSlide(currentIndex);\n    } else {\n      bounce(\"next\");\n    }\n  });\n\n  prevBtn.addEventListener(\"click\", () => {\n    if (currentIndex > 0) {\n      currentIndex--;\n      showSlide(currentIndex);\n    } else {\n      bounce(\"prev\");\n    }\n  });\n});\n// END Bouncy Slider for Testimonials   \n\n</script>\n

CTA Section GSAP Animation

Featuring splitText animation for some text element in CTA section(Following cursor button is not GSAP animation).

<script>\n\n//-----CTA SECTION------\n  \n// CTA Title Animation\n const splitContact = new SplitText(\".contact-title\", { type: \"chars\" });\n\n// Set initial opacity & blur\ngsap.set(splitContact.chars, { \n  opacity: 0, \n  filter: \"blur(1vw)\"\n});\n\ngsap.to(splitContact.chars, {\n  scrollTrigger: {\n    trigger: \".cta-wrap\",\n    start: \"top 25%\", // when .cta-wrap center hits viewport center\n    end: \"bottom top\",\n    toggleActions: \"play none none none\" // play on enter, reverse on leave\n  },\n  opacity: 1,\n  filter: \"blur(0vw)\",\n  duration: 1,\n    stagger: {\n    each: 0.8 / splitContact.chars.length,\n    from: \"random\"\n  },\n  ease: \"power2.out\"\n});\n// END CTA Title Animation\n  \n//CTA Following button text type effect\n  \ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  const pointer = document.querySelector(\".cursor-pointer\");\n  const textEl = document.querySelector(\".pointer-text\");\n  const arrow = document.querySelector(\".arrow-icon\");\n  const textContent = textEl.textContent;\n\n  let typingTween;\n\n  // Initial state\n  textEl.textContent = \"\";\n\n  pointer.addEventListener(\"mouseenter\", () => {\n    gsap.killTweensOf([arrow, textEl]);\n    if (typingTween) typingTween.kill();\n\n    // Fade out arrow\n    gsap.to(arrow, { opacity: 0, duration: 0.2, ease: \"power2.out\", delay: 0.25 });\n\n    // Typing effect\n    textEl.textContent = \"\";\n    typingTween = gsap.to({}, { \n      delay: 0.25,\n      duration: textContent.length * 0.05, \n      onUpdate: function() {\n        let progress = this.progress();\n        let chars = Math.floor(progress * textContent.length);\n        textEl.textContent = textContent.substring(0, chars);\n      }\n    });\n  });\n\n  pointer.addEventListener(\"mouseleave\", () => {\n    gsap.killTweensOf([arrow, textEl]);\n    if (typingTween) typingTween.kill();\n\n    // Timeline with slight offset\n    const tl = gsap.timeline({ delay: 0.25 });\n    tl.to(textEl, { textContent: \"\", duration: 0.3, ease: \"power1.inOut\" }, 0)\n      .to(arrow, { opacity: 1, duration: 0.2, ease: \"power2.inOut\" }, 0.05); // arrow starts 0.05s after text fade begins\n  });\n});\n// END Following button text type effect\n\n\n</script>\n

\n\n \n\n \n\n\n\n\n","The guide provides detailed instructions for using the Mellio Webflow Template, emphasizing GSAP animations across various sections of a website. Key highlights include:\n\n1. **GSAP Implementation**: Details on integrating GSAP and adding smooth scrolling with the 'Lenis' library for a refined user experience.\n\n2. **Hero Section**: Features random text splitting and blur effects for animations, alongside a flickering background image.\n\n3. **About Section**: Introduces text animations using SplitText for random letter sequences, with additional functionality of image trails following mouse movements.\n\n4. **Project Section**: Focuses on draggable project cards that can expand to reveal information, utilizing SplitText for text animations.\n\n5. **Service Section**: Includes a draggable slider for services and counter animations.\n\n6. **Testimonial Section**: Implements a bouncy slider for testimonials with navigation buttons.\n\n7. **CTA Section**: Features SplitText animations for texts, incorporating additional animations for interactive elements such as a cursor following button.\n\nEach section is supplemented with code snippets for practical implementation.",[],"https://storage.googleapis.com/firecrawl-scrape-media/screenshot-88be60f9-af2a-4bf9-8b3a-592377780840.png?GoogleAccessId=scrape-bucket-accessor%40firecrawl.iam.gserviceaccount.com&Expires=1766811900&Signature=mTFzyX64OJnXo8ftqud96oiaXkudqcK2qFVpQak4l%2FfD28TzRnWvZvtEkGZEeOh0rFYihpwceIRGrY3ikRZkxtXyZa7LNGaI6wJGEsZDDj789MQ1dEaHvdWrtwm7bWjxCMql6TJ7ilwpu8vOmoyvNI25bH2agndJNEDJ09HIKNNu1TGzch6NDje7DVdpVFJX5K5GKYnDZ6hTJl8VdV9Tro5CZvlIjad8tQcAfHvtttMyhZqlafHbFMXOuIyd1X%2FSdupnnA%2FwFv55AHkTdW00fxR4%2FQyPyTAb0%2FF8Pks0xhXfexbF7Xazow0GpQOS8HPuRSZ4T5fPI9WNzTivhRXX2g%3D%3D",{"_32":33,"_34":298,"_46":302,"_55":303,"_73":310,"_79":311,"_81":312,"_87":313,"_90":314},[299,300,301],{"_37":38,"_39":40},{"_37":42,"_39":14},{"_37":44,"_39":45},{"_48":49,"_50":49,"_51":52,"_53":49,"_54":49},{"_57":304,"_60":305,"_67":309},{"_48":44,"_59":42},{"_62":306,"_59":307,"_65":308},[44,38],[42,38],[42,38],{"_69":70,"_71":140,"_62":72},{"_75":76,"_77":78},{},{"_83":-5,"_84":85,"_86":-5},[89],{"_92":93,"_46":93,"_94":93},{"_97":316,"_99":317,"_84":85},"Instruction - Mellio - Webflow HTML website template","Instruction guide for the template","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/video.webm?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=ec2f410dcb642741511379363d29c3182091b9c2048c0d481ec3f1f8e8f35972&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",[320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348,349,350,351,352],"https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=0a96dc562945e2cee813ab769b90549b6381cc930b51820e7eb811446347fac3&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=33b27820da2d644d9f6a2d964a5be0efdee86c0a869a370e16aa0d6eb832bfe3&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=58ed0faf6a4f9f388df53eb387416e123e31f77ee3283f227be82c447c15293a&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-3.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=f4ef0456cb49649d484ca746d670f6a9f4b904c290bc01c35c3a1f054b996632&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-4.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=cc541514afcde57e8f08ce8ad10e92f68c2a3ee66a8ed08cc9acb2e70104f498&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-5.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=e39633a89c994ffd4adb5ee36767b2b16a658d4f9a16b04cc8736771ddb4ad3b&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-6.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=db886a530f175c11683655842084301045669540dbe2ba16da54df40904764a1&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-7.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=7ab78a788799a08365a06480a84b084d62d86f6c4b18aaaf418b01b8ec881e3a&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-8.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=5e9d88be0b2d46111c4be80573159c4760df11f85b971424f6f70b38bd5a2551&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-9.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=9bd693fad02bcddc4e7a410650d6dc4012f5284f8bb90c8dcc6f1ce6b16c771d&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-10.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=43d0cf9cdf4438678e12a01ede84c325a6f6774eb6a12b0aa43022b102660c80&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-11.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=1eab0fd16e4a7402f0af416a28e4a782d2256e5853f0e5c099ee26a77611fb78&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-12.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=4314da469693367503025ed3ab0aec171bd7b5acd41737a122b6485264a79f27&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-13.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=cdf45b1c210d8993ed0d1df56adfe4f94a27c17cfba022c10b9204966dffabc1&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-14.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=4b5c2bf383a092539f62fc74b956ba54264df33e867385ea68812ed369c9154f&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-15.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=7e5e67242fcbfd4915b4a57910d8dbefd37e7589c5bd86aecbb69896a62556f6&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-16.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=c55d22d8af988817a0ceffdbeb191102beb86fdaf64dbd57b90fc240f7479552&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-17.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=32b740e3fa87ca0c118ebfff4d46fc732c51c04e7da8e268ef12a76053196647&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-18.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=4a169beba95c14bc43aaa333cdcc02ed2551f53039de1695ba79ce86a35f8e6c&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-19.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=609ded98d923f1949ca4a4cccabea4af0cbc59e307dbc1502b568b79e1b21fc3&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-20.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=405e96759120682d3153dafce9142e9d8380803b925ed911978a1c3a0a70bcf3&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-21.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=9a4d93a19bbb704130db5e062f23b57fb6de2d616419f87610db3ccf5205cb98&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-22.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=8e25ebe0b78b813194e29695f1935b8767a4597800156d09d20e35af27f8697e&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-23.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=8e4df5b230b82088e9fb5234ae62896ab0529d59d97c27226c82bf0aac812eea&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-24.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=a727662dab50977079e8f313bf61e8a6c0a527dbc20aa9ac533500e942a95efa&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-25.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=6a2d5b7d3f376a81d553dd11bdaf026c9935425616c0bb28a0689bb3dfa13e11&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-26.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=001e68153182108c082aca16c284ab117f9841284ef2162e2b70ff364354fbb0&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-27.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=27f92d967b91881d91deb44731d3623ef851f54e7bd3d9a1ff5f6b91bd35b351&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-28.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=2cade3ba0fb21729ab32d76d508e783828bea6d948981c600d4b28b10598922c&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-29.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=186e91feb771ac25ea75bbf3ffca35698f5fb98bca18350c76b4a7b8f02d83e9&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-30.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=f859a148c45d8dfdf064a6c050a7e41fc4840651ad2b14bc19a08519390b19ee&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-31.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=5400a9a60a2132b63a7be9bf66aa9a82dd265f41c63e1f8549fd1886952785d1&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","https://kite-jupiter-project.s3.ap-south-1.amazonaws.com/recordings/019b3a25-1e9f-7518-ab31-c746adb2fe41/00gisyp7/screenshot-32.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVWHAAGIQFJY5T4D6%2F20251230%2Fap-south-1%2Fs3%2Faws4_request&X-Amz-Date=20251230T114715Z&X-Amz-Expires=604800&X-Amz-Signature=cbbb7635ed4df80f433a22ccfd01a9e068761081f662a652027d6330e25fd685&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","{\n \"identity\": {\n \"hero_gesture\": \"The 'IDE Aesthetic' — Treating the interface as a code editor by using dark-mode syntax highlighting as the primary source of color and visual texture against a void-black background.\",\n \"supporting_signatures\": [\n \"High-contrast horizontal hairline dividers\",\n \"Monospace typography integrated into body copy\",\n \"Visible code snippets functioning as primary imagery\",\n \"Pure white typography on pitch black\"\n ],\n \"personality_in_five_words\": [\n \"Technical\",\n \"Precise\",\n \"Dark-mode-native\",\n \"Utilitarian\",\n \"Instructional\"\n ]\n },\n \"color_system\": {\n \"section_by_section_backgrounds\": \"Global: Black (#000000) or extremely dark grey (#050505) constant throughout all sections.\",\n \"background_rule\": \"Solid void black. No gradients, no section breaks via background color changes. The only background variation occurs within containerized code blocks (dark grey #1e1e1e).\",\n \"text_color_rule\": \"Primary text is pure white (#FFFFFF). Secondary text/labels are light grey (#AAAAAA). Code follows standard syntax highlighting (Yellow/Green/Blue/Orange) which provides the only color pops.\",\n \"accent_rule\": \"Use syntax-highlighting colors ONLY inside code blocks or for very specific semantic indicators. NEVER use them for decorative backgrounds or large headings.\",\n \"temperature\": \"cool\"\n },\n \"typography_system\": {\n \"display_classification\": {\n \"serif_or_sans\": \"sans-serif\",\n \"case\": \"sentence-case\",\n \"weight\": \"bold\",\n \"width\": \"normal\",\n \"character\": \"geometric and functional\"\n },\n \"display_rule\": \"Headings are functional and moderate in size (approx 2rem - 3rem). They prioritize readability over decorative flair.\",\n \"body_rule\": \"Sans-serif for narrative text, Monospace for technical terms. High legibility, left-aligned, max-width approx 60-70 characters.\",\n \"hierarchy_contrast\": \"moderate\",\n \"special_techniques\": [\n \"Inline code styling (monospace + background) within body text\",\n \"Horizontal divider lines acting as typographic stops\"\n ]\n },\n \"imagery_system\": {\n \"treatment_rule\": \"Code blocks serve as the 'images'. They are contained in rectangular boxes with a slightly lighter background (dark grey) than the page, with sharp or minimally rounded corners (0-4px).\",\n \"placement_rule\": \"Stacked vertically, inline with the narrative flow. Code blocks take up significant vertical space.\",\n \"text_image_relationship\": \"ADJACENT\",\n \"photography_direction\": null,\n \"illustration_style\": \"No traditional illustrations. The visual interest comes purely from the structure and color of code syntax.\"\n },\n \"shape_and_space_system\": {\n \"corner_rule\": \"Sharp (0px) or extremely minimal rounding (4px) on code containers. The aesthetic is boxy and precise.\",\n \"shape_vocabulary\": [\n \"Rectangles (code blocks)\",\n \"Horizontal lines (dividers)\"\n ],\n \"spacing_philosophy\": {\n \"between_sections\": \"generous (80-120px)\",\n \"within_sections\": \"balanced\",\n \"overall_feel\": \"Structured and rhythmic, defined by the alternating pattern of text and code blocks.\"\n },\n \"layout_structure\": \"Single-column central layout with constrained width for readability. Left-aligned content.\",\n \"decorative_elements\": [\n \"Full-width horizontal hair-lines (1px white/grey)\"\n ]\n },\n \"interactive_elements\": {\n \"button_style\": {\n \"shape\": \"sharp rectangle\",\n \"fill\": \"outline/ghost\",\n \"color_rule\": \"White borders and text on black background.\"\n },\n \"link_style\": \"Text links likely white or underlined, indistinguishable from bold text until hovered.\",\n \"card_style\": \"Code blocks function as cards: distinct background color (#1e1e1e), no shadow, flat appearance.\"\n },\n \"motion_and_animation\": {\n \"inferred_motion_style\": \"smooth-and-subtle\",\n \"likely_animated_elements\": [\n \"Smooth scrolling (Lenis) affecting the whole page\",\n \"Text reveals (blur to focus, opacity fade-in)\",\n \"Code typing effects or staggering characters\"\n ],\n \"confidence\": \"high\"\n },\n \"transfer_blueprint\": {\n \"non_negotiables\": [\n \"MUST use a dark mode palette (Black background, White text)\",\n \"MUST feature monospace font prominently for technical/data details\",\n \"MUST use syntax-highlighting colors as the primary accent method\",\n \"MUST maintain a single-column, left-aligned layout\",\n \"ALWAYS separate major sections with thin horizontal lines\",\n \"NEVER use heavy drop shadows or skeuomorphic depth\",\n \"NEVER use decorative photography; 'data/code' is the visual\",\n \"Background must remain solid and flat\"\n ],\n \"flexible_elements\": [\n \"The specific sans-serif font family (Inter, Roboto, Helvetica work)\",\n \"The specific syntax highlighting theme (Dracula, Monokai, etc.)\",\n \"Exact width of the central column\"\n ],\n \"build_recipe\": [\n \"Set body background to #000000 and text to #FFFFFF.\",\n \"Select a high-quality monospace font for technical data.\",\n \"Create a container class for 'code/data' blocks with a #1e1e1e background.\",\n \"Apply syntax highlighting colors (Green, Blue, Yellow) to keywords within data blocks.\",\n \"Use 1px white horizontal lines (`border-bottom`) to divide logical sections.\",\n \"Ensure all headings are bold sans-serif, sentence case.\",\n \"Implement smooth scrolling or eased entry animations for content.\"\n ],\n \"do_not\": [\n \"Do not use light mode backgrounds.\",\n \"Do not center-align large blocks of text.\",\n \"Do not use serif fonts for body copy.\",\n \"Do not use rounded 'bubble' shapes or gradients.\",\n \"Do not clutter the negative space; keep the rhythm vertical and clean.\"\n ],\n \"common_mistakes_to_avoid\": [\n \"Making the code/data blocks too low contrast against the background\",\n \"Overusing the syntax colors in non-technical headings\",\n \"Ignoring vertical rhythm/spacing between text and data blocks\"\n ]\n }\n}","Recording timeout: job stuck for more than 2 hours","limit","depth",2,"{\n \"site_overview\": {\n \"primary_purpose\": \"To showcase the creative and technical capabilities of a branding agency through a highly interactive portfolio.\",\n \"target_audience\": \"Potential clients seeking high-end branding, identity design, and strategy services.\",\n \"industry_vertical\": \"Creative Agency / Design Studio\",\n \"site_type\": \"portfolio\"\n },\n \"information_architecture\": {\n \"page_types_found\": [\n {\n \"type\": \"homepage\",\n \"purpose\": \"The primary experience; a long-scroll page containing the portfolio, services, about, and contact info.\",\n \"typical_sections\": [\n \"Hero with kinetic typography\",\n \"Mission statement\",\n \"Project showcase (draggable slider)\",\n \"Services list\",\n \"Testimonials/Stats\",\n \"Contact/CTA\"\n ]\n },\n {\n \"type\": \"documentation\",\n \"purpose\": \"Technical instructions for using the site template and animations.\",\n \"typical_sections\": [\n \"Introduction\",\n \"Code snippets\",\n \"Feature guides (GSAP, Lenis)\"\n ]\n },\n {\n \"type\": \"utility\",\n \"purpose\": \"Legal and administrative information.\",\n \"typical_sections\": [\n \"Changelog\",\n \"License information\",\n \"Style guide\"\n ]\n }\n ],\n \"navigation_pattern\": \"Single-page anchor navigation (About, Service, Project, Contact) combined with a hidden hamburger menu for utility pages.\",\n \"content_depth\": \"shallow (1-2 levels)\",\n \"cross_linking_strategy\": \"Primary content flows linearly on the homepage; specific case studies link out externally or to modals; utility pages are isolated.\"\n },\n \"messaging_framework\": {\n \"value_proposition\": {\n \"primary_headline_pattern\": \"Abstract, brand-centric typography or mission-based statements.\",\n \"supporting_statement_pattern\": \"Concise explanations of the intersection between creativity and technical expertise.\",\n \"proof_point_types\": [\n \"Client logos\",\n \"Case study thumbnails\",\n \"Years of operation\",\n \"Client satisfaction metrics\"\n ]\n },\n \"messaging_hierarchy\": [\n \"Brand Identity & Visual Impact (shown via design)\",\n \"Technical Sophistication (GSAP/Animation capability)\",\n \"Strategic Approach\",\n \"Specific Service Offerings\"\n ],\n \"call_to_action_patterns\": {\n \"primary_cta\": \"Contact / Let's Talk\",\n \"secondary_ctas\": [\n \"See Case\",\n \"View Project\"\n ],\n \"cta_language_style\": \"action-oriented\"\n }\n },\n \"voice_and_tone\": {\n \"personality_traits\": [\n \"Modern\",\n \"Kinetic\",\n \"Confident\",\n \"Minimalist\",\n \"Sophisticated\"\n ],\n \"formality_level\": \"professional\",\n \"perspective\": \"first person plural (we/us)\",\n \"technical_level\": \"accessible\",\n \"emotional_register\": \"Cool, creative, and assured.\",\n \"writing_patterns\": {\n \"sentence_structure\": \"short and punchy\",\n \"paragraph_length\": \"brief (1-2 sentences)\",\n \"use_of_questions\": \"rare\",\n \"use_of_lists\": \"moderate\"\n }\n },\n \"content_patterns\": {\n \"headline_formulas\": [\n {\n \"pattern\": \"[Adjective] [Industry] [Noun]\",\n \"usage\": \"Mission statements\",\n \"example_abstracted\": \"Passionate branding agency\"\n },\n {\n \"pattern\": \"[Service] [Action/Benefit]\",\n \"usage\": \"Service descriptions\",\n \"example_abstracted\": \"Crafting identities and design strategy\"\n }\n ],\n \"section_templates\": [\n {\n \"name\": \"Kinetic Hero\",\n \"structure\": \"Large scale logo or typography with split-text animation, minimal navigation.\",\n \"typical_word_count\": \"5-15 words\"\n },\n {\n \"name\": \"Project Slider\",\n \"structure\": \"Horizontal draggable area featuring project cards with image, client name, and tags.\",\n \"typical_word_count\": \"10-20 words per card\"\n },\n {\n \"name\": \"Technical Documentation\",\n \"structure\": \"Header followed by descriptive text and code blocks.\",\n \"typical_word_count\": \"300-500 words\"\n }\n ],\n \"social_proof_strategy\": {\n \"types_used\": [\n \"client names\",\n \"project tags\",\n \"years experience\"\n ],\n \"placement_pattern\": \"Integrated directly into project cards and the 'About' narrative flow.\",\n \"presentation_style\": \"Minimalist, integrated into the design layout rather than a dedicated 'reviews' block.\"\n }\n },\n \"content_inventory\": {\n \"estimated_total_word_count\": 800,\n \"content_density\": \"minimal\",\n \"media_integration\": {\n \"image_usage\": \"heavy\",\n \"video_usage\": \"none\",\n \"interactive_elements\": [\n \"GSAP text splitting\",\n \"Draggable sliders\",\n \"Mouse trail effects\",\n \"Smooth scrolling (Lenis)\"\n ]\n },\n \"unique_content_features\": [\n \"Typographic experimentation (wide kerning, vertical text)\",\n \"Instructional content for developers mixed with marketing content\",\n \"Interactive cursor elements\"\n ]\n },\n \"transfer_blueprint\": {\n \"content_requirements\": [\n \"High-resolution project imagery is essential\",\n \"Short, impactful mission statement\",\n \"List of core services (3-5 items)\",\n \"Client project data (Name, Type, Tags, Link)\",\n \"Technical implementation details (if retaining the template nature)\",\n \"Legal/License text for assets\",\n \"Typography hierarchy definitions\",\n \"Contact information\"\n ],\n \"page_by_page_guide\": [\n {\n \"page_type\": \"Homepage\",\n \"required_sections\": [\n \"Hero\",\n \"About/Mission\",\n \"Selected Projects\",\n \"Service List\",\n \"Footer/Contact\"\n ],\n \"word_count_target\": \"150-300 words\",\n \"key_messages_needed\": [\n \"We combine creativity with strategy\",\n \"We have a proven track record (since 2018)\",\n \"We work on diverse project types\"\n ]\n },\n {\n \"page_type\": \"Style Guide\",\n \"required_sections\": [\n \"Color Palette\",\n \"Typography Scale\",\n \"Rich Text Elements\",\n \"Button Styles\"\n ],\n \"word_count_target\": \"50-100 words\",\n \"key_messages_needed\": [\n \"Consistency standards\",\n \"Hex codes and font names\"\n ]\n }\n ],\n \"voice_guidelines\": [\n \"Keep copy sparse; let the design do the talking.\",\n \"Use strong verbs in case study tags (e.g., Rebranding, Strategy).\",\n \"Maintain a confident, established tone.\",\n \"Avoid marketing fluff; state the value proposition clearly.\",\n \"Use technical precision when describing services.\"\n ],\n \"do_not\": [\n \"Do not use long paragraphs of text on the homepage.\",\n \"Do not clutter the hero section with secondary messages.\",\n \"Do not use stock-standard generic headings (e.g., 'Welcome to our site').\",\n \"Do not separate the portfolio from the main flow; keep it integrated.\"\n ]\n }\n}","designSpec","\"# Unified Design Specification: Project \\\"Mellio\\\"\\n\\n**Version:** 1.0\\n**Status:** Approved for Implementation\\n**Architect:** Lead Design System Architect\\n\\n---\\n\\n## 1. Global Design System\\n\\nThis system is built on a philosophy of **\\\"Architectural Brutalism.\\\"** It relies on a \\\"Void\\\" aesthetic—using infinite black space, razor-sharp edges, and massive typographic contrast to create a cinematic, precision-engineered feel.\\n\\n### 1.1 Typography: The \\\"Macro & Micro\\\" Scale\\nThe typography defines the structure. It oscillates between architectural, viewport-filling display text and highly functional, technical utility text.\\n\\n* **Primary Typeface:** Geometric Sans-Serif (References: Poppins, DM Sans, Inter).\\n * *Characteristics:* Uniform stroke width, open apertures, strictly mechanical.\\n* **Secondary Typeface:** Monospace (References: JetBrains Mono, Roboto Mono).\\n * *Usage:* Technical data, code snippets, and specific metadata labels.\\n* **Hierarchy & Sizing:**\\n * **Display (H1/H2):** Defined in Viewport Width (VW) units (e.g., `13vw`). Tight/Negative leading (line-height: 0.88 - 1.0).\\n * **Marquee:** All-caps, massive scale, separated by geometric glyphs (◆ Diamonds).\\n * **Body:** Regular weight, generous line-height (1.5), max-width 40-60ch.\\n * **Utility/Labeling:** Tiny (10-12px), All-Caps, wide tracking (+100), often Monospace.\\n\\n### 1.2 Color Paradigm: \\\"The Void\\\"\\nThe site is strictly monochromatic, treating \\\"Light\\\" as a material and \\\"Color\\\" as data.\\n\\n* **Canvas (Global):** Pure Black (`#000000`). **Non-negotiable.**\\n* **Text Hierarchy:**\\n * *Primary:* Pure White (`#FFFFFF`).\\n * *Secondary:* Light Grey (`#CCCCCC` or `#AAAAAA`).\\n * *Inactive/Stroke:* Dark Grey (`#333333` to `#666666`).\\n* **Surface Logic:**\\n * *Dark Surface:* Dark Charcoal (`#1A1A1A` or `#1E1E1E`). Used for cards/code blocks on the Landing and Instruction pages.\\n * *Light Slab:* Off-White/Light Gray (`#F5F5F5`). Used **exclusively** for high-density reading areas (e.g., Changelog) to create a \\\"paper on desk\\\" effect.\\n* **Accent Philosophy:** No decorative color. Color is reserved for **Syntax Highlighting** (Code) or **Status Indicators** (Green/Red dots).\\n\\n### 1.3 Layout & Spacing: \\\"Grid & Hairline\\\"\\nStructure is enforced through visible dividers rather than background shades.\\n\\n* **The Divider:** Full-width 1px (hairline) white or dark-grey horizontal lines separate almost all distinct semantic sections.\\n* **The Grid:** Asymmetrical splits. Common patterns include 50/50 (Text/Image) or 30/70 (Label/Content).\\n* **Corner Radius:** **Strictly 0px (Sharp).**\\n * *Exception:* Micro-rounding (2-4px) is permissible *only* on interactive code blocks or specific media cards to prevent visual \\\"cutting,\\\" but the default is 0px.\\n* **Negative Space:** Generous. Margins between sections are 80-120px.\\n\\n### 1.4 Core Components\\n* **Buttons:**\\n * *Shape:* Sharp Rectangle (0px radius) or Perfect Square (Icon only).\\n * *Primary:* Solid White background, Black text.\\n * *Secondary:* Ghost/Outline (1px White border), Transparent fill, White text.\\n* **Interactive Dividers:** Horizontal lines that may expand from 0% to 100% width on scroll.\\n* **Marquees:** Infinite horizontal scrolling text strips, usually all-caps.\\n\\n---\\n\\n## 2. Page-by-Page Specifications\\n\\n### 2.1 Landing Page / Home\\n**URL:** `.../`\\n\\n* **Visual Narrative:** A cinematic entrance into the void. The user is greeted by massive, monolithic typography that scales with their browser. As they scroll, the experience is rhythmic: huge \\\"shouting\\\" text balances against \\\"whispering\\\" utility labels.\\n* **Key Sections:**\\n * **Hero:** \\\"Monolithic Dark Mode.\\\" Massive architectural sans-serif text centered or left-aligned against the black void.\\n * **Marquee Strip:** A continuous scrolling band of all-caps text separated by Diamond (◆) glyphs.\\n * **Split-Screen Feature:** A 50/50 rigid grid. Text on one side (vertical stack), Imagery on the other (full bleed or contained aspect ratio).\\n * **Statistics:** Oversized numbers (Display size) paired with tiny all-caps labels.\\n* **Unique Visuals:**\\n * **Diamond Separators:** Use of the `◆` glyph in headers.\\n * **Square Navigation:** Buttons for sliding/navigating are perfect squares with black arrows on white backgrounds.\\n* **Composition:** Heavy use of \\\"Micro vs Macro.\\\" Tiny labels sit next to giant headlines.\\n\\n### 2.2 Changelog\\n**URL:** `.../utilities/changelog`\\n\\n* **Visual Narrative:** A shift from the \\\"Void\\\" to the \\\"Slab.\\\" The page opens on Black, but the primary content is housed in a \\\"document\\\" style container, simulating a printed page on a dark desk.\\n* **Key Sections:**\\n * **Header:** Floating freely in the black void. White text.\\n * **The Slab:** A centralized content container. Background is **Off-White (#F5F5F5)**. Corners are sharp. Shadow is non-existent.\\n * **Content:** Inside the slab, text color inverts to Dark Grey/Black for readability.\\n* **Unique Visuals:**\\n * **Inverted Contrast:** This is the only page where Body Text is dark on light.\\n * **The Void & Slab:** The technique of placing a pristine, sharp-edged light block onto the infinite black background.\\n* **Composition:** Single column, centered, max-width ~900px.\\n\\n### 2.3 Style Guide\\n**URL:** `.../utilities/style-guide`\\n\\n* **Visual Narrative:** A self-referential mathematical proof of the design system. It feels like a blueprint or a spec sheet.\\n* **Key Sections:**\\n * **Type Scale Waterfall:** Demonstrates the VW (Viewport Width) unit scaling. H1 (13vw) cascades down to Body.\\n * **Grid Demonstration:** Explicit visualization of the layout grid using 1px horizontal lines.\\n* **Unique Visuals:**\\n * **Negative Leading:** Visual proof of tight line-heights on display text (letters almost touching vertically).\\n * **Definition Lines:** Every hierarchy level is separated by a visible 1px white line.\\n* **Composition:** Highly structural. Split layout (Sidebar + Content) capability.\\n\\n### 2.4 License\\n**URL:** `.../utilities/license`\\n\\n* **Visual Narrative:** Clinical and informative. The page strips away cinematic drama for pure information architecture.\\n* **Key Sections:**\\n * **Definition Lists:** The primary pattern. A horizontal band separated by 1px lines.\\n * *Left Column (30%):* The Label (Bold, Sentence Case).\\n * *Right Column (70%):* The Definition/Content.\\n* **Unique Visuals:**\\n * **Inline Links:** Links are denoted by **Bold** weight, not color or underlines.\\n * **No Imagery:** The page relies entirely on the rhythm of horizontal lines and text blocks.\\n* **Composition:** Asymmetrical 2-column grid inside horizontal rows.\\n\\n### 2.5 Instruction / Documentation\\n**URL:** `.../utilities/instruction`\\n\\n* **Visual Narrative:** The \\\"IDE Aesthetic.\\\" The page treats the user like a developer. It visualizes code as the primary form of imagery.\\n* **Key Sections:**\\n * **Narrative Column:** Left-aligned text for instructions.\\n * **Code Islands:** Blocks of code contained in Dark Grey (`#1E1E1E`) rectangles.\\n* **Unique Visuals:**\\n * **Syntax Highlighting:** The *only* source of color in the system. Keywords in code blocks use Pastel Green, Blue, Yellow, and Orange.\\n * **Monospace Integration:** Heavy use of monospace fonts even in the narrative flow for technical terms.\\n* **Composition:** Vertical rhythm defined by alternating Text (Black background) and Code Blocks (Dark Grey background).\\n\\n---\\n\\n## 3. Brand Adaptation Strategy\\n\\nIf this system needs to be adapted for a different brand, follow these guidelines to ensure the \\\"Mellio\\\" structural integrity remains while changing the visual flavor.\\n\\n### 3.1 The \\\"Paint\\\" (Variables to Change)\\n* **The Font Family:** You may swap the Geometric Sans for a Grotesque (e.g., Akzidenz) or a Neo-Grotesque (e.g., Helvetica), provided it remains neutral.\\n* **The \\\"Void\\\" Tint:** The Pure Black (`#000000`) can be shifted to a Deep Midnight Blue (`#020210`) or Deep Forest Green (`#051005`) to add brand temperature.\\n* **The \\\"Slab\\\" Color:** The Changelog's off-white slab can be tinted to match the brand warmth (e.g., Cream/Bone instead of Cool Grey).\\n* **Syntax Theme:** The code highlighting colors in the Instruction page can be adapted to match specific brand accent colors.\\n\\n### 3.2 The \\\"Canvas\\\" (Structural Constants - Do Not Change)\\n* **Sharp Edges:** You must preserve the 0px border-radius rule. Rounding corners will instantly destroy the \\\"Architectural/Industrial\\\" vibe.\\n* **The Hairlines:** The 1px horizontal dividers are essential for structure. Do not remove them or replace them with shadows.\\n* **Contrast Polarity:** You must maintain \\\"Light Text on Dark Background\\\" for the primary interface.\\n* **Viewport Scaling:** The \\\"Monolithic\\\" feel comes from VW-based font sizing. Fixed pixel sizes for headers will make the design feel small.\\n\\n### 3.3 Risk Assessment\\n* **Risk:** *Introducing a Serif Font.*\\n * *Result:* The design shifts from \\\"Technical/Industrial\\\" to \\\"Editorial/Fashion.\\\" This breaks the \\\"IDE/Blueprint\\\" aesthetic.\\n* **Risk:** *Adding Drop Shadows.*\\n * *Result:* The \\\"Void\\\" illusion collapses. The design relies on flat layers and high contrast, not simulated depth.\\n* **Risk:** *Using Gradients on Backgrounds.*\\n * *Result:* The crispness of the hairline dividers will get lost. The design requires solid, flat colors to maintain its precision.\"","contentSpecError","designSpecError","designCritique","designCritiqueError","actionData","errors"]

Changelog

Version 1.0.0

Style guide

H1- Aa Bb Cc

H2- Aa Bb Cc

H3- Aa Bb Cc

H4- Aa Bb Cc

H5- Aa Bb Cc

H6- Aa Bb Cc

H1

H2

H3

H4

H5

H6

MellioTM

License

Image License

Instruction

GSAP Guide

Lenis Smooth Scroll

Hero Section GSAP Animation

About Section GSAP Animation

Project Section GSAP Animation

Service Section GSAP Animation

Testimonial Section GSAP Animation

Testimonial Section GSAP Animation

CTA Section GSAP Animation

M
e
l
l
i
o
T
M

Changelog - Mellio - Webflow HTML website template

Summary

Scroll Recording