# SW Phone Animation Ai Products — AI Agent Reference **Module name:** SW Phone Animation Ai Products **Use this document when:** The user asks about a typewriter + phone/hand icon cycle, omni-channel animation, desktop hand vs mobile phone stage, wave outer image, or this client-exclusive section. Do not invent this module on a standard SW theme. **Master version number (check `module.html`):** 2026.09.11.09.54 **Client-exclusive:** Production on **itt/ai-products-2026** only. **Never** on SW Theme Master, theme-tester, smithworks-2025, or Option C installs. If the module is missing from the picker, it was not installed for that theme — do not copy it onto master. --- ## 1. Overview **SW Phone Animation Ai Products** is a page-level section: a heading panel, a content stage with typewriter text synced to screen icons on a device image, and optional footer content. - **Desktop / XL** (and tablet when Use Mobile Layout on Tablet is off): hand + phone image, bottom of the stage. - **Mobile** (always) and tablet when that option is on: phone-only image. - Each **Animation Item** is one typewriter string + one icon. The loop types the string while the matching icon fades in, holds, then fades both out. **Not this module:** A search-box typewriter → not this (that would be a different job). Page FAQs → **SW FAQs Basic**. Generic hero → **SW Hero**. **Outer default is Image**, not Outer Animated. Default art is theme `wave-background.svg` with base color `#f1f0ec`. Outer Animated chrome exists (cloned from SW FAQs Basic) but is **not** the default. **Inner default is None.** Carmello Inner Rim is not on this module. --- ## 2. Content Tab - **Enable Module** — On/off. - **Heading Content** — Optional headings (accent HTML in heading text is allowed with `|safe`), rich text, buttons. - **Desktop Image** — Hand + phone. Empty uses theme `hand-desktop.png`. - **Mobile Image** — Phone only. Empty uses theme `phone-mobile.png`. - **Animation Items** — Repeater. Each row: **Typewriter Text** + **Icon Image**. Sample icons: voice, WhatsApp, SMS, web chat. - **Content Area Headings / Content Area** — Optional intro on the stage (usually empty; the typewriter is the stage copy). - **Footer Content** — Optional headings, rich text, and buttons below the stage. - CTA / link default href: `https://smithworks.marketing/sw-module-documentation`. --- ## 3. Style Tab ### Module Settings Standard Module Outer / Inner spacing and max widths (same family as SW FAQs Basic). ### Module Background Settings - **Module Outer Background Option** default **Image**. Default file: theme `images/sw-phone-animation-ai-products/wave-background.svg`. Base `#f1f0ec`. SVG is not resized with `resize_image_url`. - **Module Inner** default **None**. - Outer Animated is available in the dropdown (inherited chrome). Turning it on is an editor choice, not the ship default. ### Content Colors / panels Heading Panel, Content Area, and Footer use the usual SW panel settings. Content Area color default **Secondary** for the typewriter. ### Animation Settings | Control | Default | Notes | |---------|---------|-------| | Fade (ms) | 100 | In and out; text and icon share this | | Hold (ms) | 1800 | Fully visible after type-in finishes | | Pause (ms) | 500 | After fade-out, before the next item | | Animate on Mobile | On | When off: item 1 static (full text + icon) | | Use Mobile Layout on Tablet | Off | Tablet keeps the hand unless this is on | | Icon Overlay Left / Top (%) | 18 / 10 | Desktop position; same for every icon | | Icon Size (%) | 28 | Percent of the **hand/device** image (desktop / tablet-desktop). Does not apply to the phone image. | | Icon Size Mobile (%) | 56 | Percent of the **phone** image. Always visible. Also applies when Use Mobile Layout on Tablet is on. | | Icon Overlay Nudge X / Y (px) | 0 | Desktop; inherited on mobile unless override is on | | Icon Overlay Rotate (deg) | 0 | Desktop | | Override Mobile Icon Overlay | Off | When on: mobile nudge X/Y and rotate. Tablet-mobile uses the same mobile overlay. Left/Top stay desktop-only (mobile position is 50%/42%). Icon Size Mobile is separate and always applies. | Type speed is **not** an editor field (~45ms per character). `prefers-reduced-motion`: freeze on item 1 (full text + icon, no type/cycle). If Outer Animated is **not** on, the typewriter does **not** wait for the 800ms Outer Animated canvas fade. --- ## 4. Common Tasks - **Change the lines:** Edit Animation Items (text + icon). Keep icons the same crop/ratio. - **Swap the devices:** Replace Desktop Image and/or Mobile Image. - **Wave background:** Leave Outer Background Option on Image, or pick another image. Do not assume Animated is required for the wave. - **Nudge icons on desktop:** Icon Overlay Nudge X/Y and Rotate. - **Icon size on phones:** Icon Size Mobile (%). Default 56 fills the phone screen similarly to desktop; do not use desktop Icon Size for that. - **Different mobile overlay:** Turn Override Mobile Icon Overlay on; set mobile nudge and rotate. - **Tablet like mobile:** Turn Use Mobile Layout on Tablet on. - **Stop motion on phones:** Animate on Mobile off. --- ## 5. Sample view / defaults - Four animation items (Voice Call, WhatsApp, SMS, Web Chat) with theme icon PNGs. - Desktop hand + mobile phone theme defaults. - Outer Image wave SVG; Inner None. - Heading sample may include an accent `` in heading text. --- ## 6. Related / limits - **Client-exclusive.** Do not add this folder to SW Theme Master or theme-tester. - Do not roll **SW AI Documentation.html** or this `.txt` to client portals; they live on **smithworks-2025** only. - Production home is ITT **ai-products-2026**. Do not reinstall on smithworks-2025. --- ## 7. Document Version **Module:** SW Phone Animation Ai Products. **Master version number:** 2026.09.11.09.54. **Doc last updated:** 2026-09-11. **2026.09.11.09.54:** Icon Size Mobile (%) default 56. Prior first ship: typewriter + icon cycle; desktop hand / mobile phone; outer Image wave SVG (not Animated default); Override Mobile Icon Overlay.