diff --git a/src/features/cseMachine/CseMachineAnimation.tsx b/src/features/cseMachine/CseMachineAnimation.tsx
index 9f549351fa..1f073dbeeb 100644
--- a/src/features/cseMachine/CseMachineAnimation.tsx
+++ b/src/features/cseMachine/CseMachineAnimation.tsx
@@ -158,6 +158,7 @@ export class CseAnimation {
     ) {
       return;
     }
+
     if (isNode(lastControlItem)) {
       CseAnimation.handleNode(lastControlItem);
     } else if (isInstr(lastControlItem)) {
diff --git a/src/features/cseMachine/CseMachineUtils.ts b/src/features/cseMachine/CseMachineUtils.ts
index abbb8ef2cd..a3d52ba10c 100644
--- a/src/features/cseMachine/CseMachineUtils.ts
+++ b/src/features/cseMachine/CseMachineUtils.ts
@@ -265,7 +265,7 @@ export function isMainReference(value: Value, reference: ReferenceType) {
 export function isDummyReference(reference: ReferenceType) {
   return (
     (reference instanceof Binding && reference.isDummyBinding) ||
-    (reference instanceof ArrayUnit && !reference.parent.isReferenced())
+    (reference instanceof ArrayUnit && !reference.parent.isReachable())
   );
 }
 
@@ -412,13 +412,13 @@ export function setUnhoveredStyle(target: Node | Group, unhoveredAttrs: any = {}
     node.setAttrs({
       stroke: node.attrs.stroke
         ? node instanceof Text
-          ? defaultTextColor()
-          : defaultStrokeColor()
+          ? reachedTextColor()
+          : reachedStrokeColor()
         : node.attrs.stroke,
       fill: node.attrs.fill
         ? node instanceof Text
-          ? defaultTextColor()
-          : defaultStrokeColor()
+          ? reachedTextColor()
+          : reachedStrokeColor()
         : node.attrs.fill,
       ...unhoveredAttrs
     });
@@ -942,16 +942,16 @@ export const isStashItemInDanger = (stashIndex: number): boolean => {
 export const defaultBackgroundColor = () =>
   CseMachine.getPrintableMode() ? Config.PrintBgColor : Config.BgColor;
 
-export const defaultTextColor = () =>
+export const reachedTextColor = () =>
   CseMachine.getPrintableMode() ? Config.PrintTextColor : Config.TextColor;
 
-export const fadedTextColor = () =>
+export const defaultTextColor = () =>
   CseMachine.getPrintableMode() ? Config.PrintTextColorFaded : Config.TextColorFaded;
 
-export const defaultStrokeColor = () =>
+export const reachedStrokeColor = () =>
   CseMachine.getPrintableMode() ? Config.PrintStrokeColor : Config.StrokeColor;
 
-export const fadedStrokeColor = () =>
+export const defaultStrokeColor = () =>
   CseMachine.getPrintableMode() ? Config.PrintStrokeColorFaded : Config.StrokeColorFaded;
 
 export const defaultActiveColor = () =>
diff --git a/src/features/cseMachine/animationComponents/ArrayAccessAnimation.tsx b/src/features/cseMachine/animationComponents/ArrayAccessAnimation.tsx
index 7219cafe92..859014b858 100644
--- a/src/features/cseMachine/animationComponents/ArrayAccessAnimation.tsx
+++ b/src/features/cseMachine/animationComponents/ArrayAccessAnimation.tsx
@@ -10,9 +10,9 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import {
   defaultActiveColor,
   defaultDangerColor,
-  defaultStrokeColor,
   getTextWidth,
-  isStashItemInDanger
+  isStashItemInDanger,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
@@ -113,7 +113,7 @@ export class ArrayAccessAnimation extends Animatable {
     await Promise.all([
       this.arrayItemAnimation.animateTo({ opacity: 0 }, { duration: 0.6 }),
       this.arrayArrowAnimation.animateTo({ opacity: 0 }, { duration: 0.6 }),
-      this.accessorAnimation.animateRectTo({ stroke: defaultStrokeColor() }, { duration: 1.2 }),
+      this.accessorAnimation.animateRectTo({ stroke: reachedStrokeColor() }, { duration: 1.2 }),
       this.accessorAnimation.animateTo(
         {
           x: indexAboveArrayLocation.x - minInstrItemWidth,
@@ -122,7 +122,7 @@ export class ArrayAccessAnimation extends Animatable {
         },
         { duration: 1.2 }
       ),
-      this.indexItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }, { duration: 1.2 }),
+      this.indexItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }, { duration: 1.2 }),
       this.indexItemAnimation.animateTo(indexAboveArrayLocation, { duration: 1.2 })
     ]);
     // Move arr acc instruction and result on top of array, and bring result up
diff --git a/src/features/cseMachine/animationComponents/ArrayAssignmentAnimation.tsx b/src/features/cseMachine/animationComponents/ArrayAssignmentAnimation.tsx
index 744a9b6929..00544d676b 100644
--- a/src/features/cseMachine/animationComponents/ArrayAssignmentAnimation.tsx
+++ b/src/features/cseMachine/animationComponents/ArrayAssignmentAnimation.tsx
@@ -12,8 +12,8 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import {
   defaultActiveColor,
   defaultDangerColor,
-  defaultStrokeColor,
-  getTextWidth
+  getTextWidth,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
@@ -120,18 +120,18 @@ export class ArrayAssignmentAnimation extends Animatable {
     await Promise.all([
       this.arrayArrowAnimation.animateTo({ opacity: 0 }, { duration: 0.5 }),
       this.valueArrowAnimation?.animateTo({ opacity: 0 }, { duration: 0.5 }),
-      this.asgnItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.asgnItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.asgnItemAnimation.animateTo({
         x: this.resultItem.x() - (this.resultItemIsFirst ? minAsgnItemWidth : 0),
         y: this.resultItem.y() + (this.resultItemIsFirst ? 0 : this.resultItem.height()),
         width: minAsgnItemWidth
       }),
-      this.arrayItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.arrayItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.arrayItemAnimation.animateTo({ opacity: 0 }, fadeConfig),
-      this.indexItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.indexItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.indexItemAnimation.animateTo({ x: this.resultItem.x() }),
       this.indexItemAnimation.animateTo({ opacity: 0 }, fadeConfig),
-      this.resultAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.resultAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.resultAnimation.animateTo({ x: this.resultItem.x() }),
       this.resultArrowAnimation?.animateTo({ opacity: 1 }, { duration: 0.5, delay: 0.75 })
     ]);
diff --git a/src/features/cseMachine/animationComponents/AssignmentAnimation.tsx b/src/features/cseMachine/animationComponents/AssignmentAnimation.tsx
index a8254d1dec..190bea368c 100644
--- a/src/features/cseMachine/animationComponents/AssignmentAnimation.tsx
+++ b/src/features/cseMachine/animationComponents/AssignmentAnimation.tsx
@@ -9,7 +9,7 @@ import { defaultOptions, Text } from '../components/Text';
 import { PrimitiveValue } from '../components/values/PrimitiveValue';
 import { Value } from '../components/values/Value';
 import { ControlStashConfig } from '../CseMachineControlStashConfig';
-import { defaultActiveColor, defaultStrokeColor, getTextWidth } from '../CseMachineUtils';
+import { defaultActiveColor, getTextWidth, reachedStrokeColor } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
 import { AnimatedTextbox } from './base/AnimatedTextbox';
@@ -72,7 +72,7 @@ export class AssignmentAnimation extends Animatable {
     this.binding.arrow?.ref.current?.hide();
     // move asgn instruction next to stash item, while also decreasing its width
     await Promise.all([
-      this.asgnItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.asgnItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.asgnItemAnimation.animateTo({
         x: this.stashItem.x() - (this.stashItemIsFirst ? minAsgnItemWidth : 0),
         y: this.stashItem.y() + (this.stashItemIsFirst ? 0 : this.stashItem.height()),
diff --git a/src/features/cseMachine/animationComponents/BinaryOperationAnimation.tsx b/src/features/cseMachine/animationComponents/BinaryOperationAnimation.tsx
index 949ddf58e3..d03bcb9ee4 100644
--- a/src/features/cseMachine/animationComponents/BinaryOperationAnimation.tsx
+++ b/src/features/cseMachine/animationComponents/BinaryOperationAnimation.tsx
@@ -7,9 +7,9 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import {
   defaultActiveColor,
   defaultDangerColor,
-  defaultStrokeColor,
   getTextWidth,
-  isStashItemInDanger
+  isStashItemInDanger,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedTextbox } from './base/AnimatedTextbox';
@@ -72,10 +72,10 @@ export class BinaryOperationAnimation extends Animatable {
     const fadeInDelay = 1 / 4;
     // Shifts the right operand to the right and move the operator in between the operands
     await Promise.all([
-      this.binaryOperatorAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.binaryOperatorAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.binaryOperatorAnimation.animateTo({ ...rightOpPosition, width: minBinOpWidth }),
-      this.leftOperandAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
-      this.rightOperandAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.leftOperandAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
+      this.rightOperandAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.rightOperandAnimation.animateTo({
         ...rightOpPosition,
         x: rightOpPosition.x + minBinOpWidth
diff --git a/src/features/cseMachine/animationComponents/BranchAnimation.tsx b/src/features/cseMachine/animationComponents/BranchAnimation.tsx
index 092651359d..e095f40498 100644
--- a/src/features/cseMachine/animationComponents/BranchAnimation.tsx
+++ b/src/features/cseMachine/animationComponents/BranchAnimation.tsx
@@ -3,7 +3,7 @@ import { Group } from 'react-konva';
 
 import { ControlItemComponent } from '../components/ControlItemComponent';
 import { StashItemComponent } from '../components/StashItemComponent';
-import { defaultDangerColor, defaultStrokeColor } from '../CseMachineUtils';
+import { defaultDangerColor, reachedStrokeColor } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedTextbox } from './base/AnimatedTextbox';
 import { getNodePosition } from './base/AnimationUtils';
@@ -44,7 +44,7 @@ export class BranchAnimation extends Animatable {
     this.resultItems.forEach(i => i.ref.current?.hide());
     // Move boolean next to branch instruction
     await Promise.all([
-      this.booleanItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.booleanItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.booleanItemAnimation.animateTo({
         x: this.branchItem.x() + this.branchItem.width(),
         y: this.branchItem.y()
diff --git a/src/features/cseMachine/animationComponents/ControlExpansionAnimation.tsx b/src/features/cseMachine/animationComponents/ControlExpansionAnimation.tsx
index 6a61ac4e4e..1fffb251aa 100644
--- a/src/features/cseMachine/animationComponents/ControlExpansionAnimation.tsx
+++ b/src/features/cseMachine/animationComponents/ControlExpansionAnimation.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Group } from 'react-konva';
 
 import { ControlItemComponent } from '../components/ControlItemComponent';
-import { defaultActiveColor, defaultStrokeColor } from '../CseMachineUtils';
+import { defaultActiveColor, reachedStrokeColor } from '../CseMachineUtils';
 import { Animatable, AnimationConfig } from './base/Animatable';
 import { AnimatedTextbox } from './base/AnimatedTextbox';
 import { getNodePosition } from './base/AnimationUtils';
@@ -56,7 +56,7 @@ export class ControlExpansionAnimation extends Animatable {
     await Promise.all([
       // Fade out the previous item while also changing its height for a more fluid animation
       this.initialItemAnimation.animateRectTo(
-        { height: totalHeight, stroke: defaultStrokeColor() },
+        { height: totalHeight, stroke: reachedStrokeColor() },
         animationConfig
       ),
       this.initialItemAnimation.animateTextTo({ y: textY }, animationConfig),
diff --git a/src/features/cseMachine/animationComponents/ControlToStashAnimation.tsx b/src/features/cseMachine/animationComponents/ControlToStashAnimation.tsx
index 6cbd749966..00945bee5e 100644
--- a/src/features/cseMachine/animationComponents/ControlToStashAnimation.tsx
+++ b/src/features/cseMachine/animationComponents/ControlToStashAnimation.tsx
@@ -8,8 +8,8 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import {
   defaultActiveColor,
   defaultDangerColor,
-  defaultStrokeColor,
-  isStashItemInDanger
+  isStashItemInDanger,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
@@ -76,7 +76,7 @@ export class ControlToStashAnimation extends Animatable {
         ...stashPosition,
         stroke: isStashItemInDanger(this.stashItem.index)
           ? defaultDangerColor()
-          : defaultStrokeColor()
+          : reachedStrokeColor()
       }),
       this.controlTextAnimation.animateTo(stashPosition),
       // If the text is different, also fade out the old text and fade in the new text
diff --git a/src/features/cseMachine/animationComponents/FrameCreationAnimation.tsx b/src/features/cseMachine/animationComponents/FrameCreationAnimation.tsx
index cbc7db54c7..13685c596e 100644
--- a/src/features/cseMachine/animationComponents/FrameCreationAnimation.tsx
+++ b/src/features/cseMachine/animationComponents/FrameCreationAnimation.tsx
@@ -12,7 +12,7 @@ import { Value } from '../components/values/Value';
 import { CseAnimation } from '../CseMachineAnimation';
 import { Config } from '../CseMachineConfig';
 import { ControlStashConfig } from '../CseMachineControlStashConfig';
-import { defaultActiveColor, defaultStrokeColor, isEnvEqual } from '../CseMachineUtils';
+import { defaultActiveColor, isEnvEqual, reachedStrokeColor } from '../CseMachineUtils';
 import { Animatable, AnimationConfig } from './base/Animatable';
 import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
 import { AnimatedRectComponent, AnimatedTextComponent } from './base/AnimationComponents';
@@ -61,7 +61,7 @@ export class FrameCreationAnimation extends Animatable {
     });
     this.borderAnimation = new AnimatedRectComponent({
       ...getNodePosition(origin),
-      stroke: origin instanceof ControlItemComponent ? defaultActiveColor() : defaultStrokeColor(),
+      stroke: origin instanceof ControlItemComponent ? defaultActiveColor() : reachedStrokeColor(),
       opacity: origin instanceof ControlItemComponent ? 1 : 0
     });
     if (frame.arrow) {
diff --git a/src/features/cseMachine/animationComponents/FunctionApplicationAnimation.tsx b/src/features/cseMachine/animationComponents/FunctionApplicationAnimation.tsx
index cea5bbf6cf..237f00b459 100644
--- a/src/features/cseMachine/animationComponents/FunctionApplicationAnimation.tsx
+++ b/src/features/cseMachine/animationComponents/FunctionApplicationAnimation.tsx
@@ -9,8 +9,8 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import {
   defaultActiveColor,
   defaultDangerColor,
-  defaultStrokeColor,
-  getTextWidth
+  getTextWidth,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
@@ -99,13 +99,13 @@ export class FunctionApplicationAnimation extends Animatable {
       getTextWidth(this.callInstrItem.text) + ControlStashConfig.ControlItemTextPadding * 2;
     // Move call instruction next to stash items
     await Promise.all([
-      this.callInstrAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.callInstrAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.callInstrAnimation.animateTo({
         x: this.closureStashItem.x() - (this.isFirstStashItem ? minInstrWidth : 0),
         y: this.closureStashItem.y() + (this.isFirstStashItem ? 0 : this.closureStashItem.height()),
         width: minInstrWidth
       }),
-      ...this.stashItemAnimations.map(a => a.animateRectTo({ stroke: defaultStrokeColor() }))
+      ...this.stashItemAnimations.map(a => a.animateRectTo({ stroke: reachedStrokeColor() }))
     ]);
     const targetLocation = {
       x: this.functionFrame?.x() ?? this.newControlItems[0].x(),
diff --git a/src/features/cseMachine/animationComponents/InstructionApplicationAnimation.tsx b/src/features/cseMachine/animationComponents/InstructionApplicationAnimation.tsx
index 394ca50d17..6243f2130d 100644
--- a/src/features/cseMachine/animationComponents/InstructionApplicationAnimation.tsx
+++ b/src/features/cseMachine/animationComponents/InstructionApplicationAnimation.tsx
@@ -8,9 +8,9 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import {
   defaultActiveColor,
   defaultDangerColor,
-  defaultStrokeColor,
   getTextWidth,
-  isStashItemInDanger
+  isStashItemInDanger,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { Animatable, AnimationConfig } from './base/Animatable';
 import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
@@ -47,7 +47,7 @@ export class InstructionApplicationAnimation extends Animatable {
     this.stashItemAnimations = stashItems.map(item => {
       return new AnimatedTextbox(item.text, getNodePosition(item), {
         rectProps: {
-          stroke: isStashItemInDanger(item.index) ? defaultDangerColor() : defaultStrokeColor()
+          stroke: isStashItemInDanger(item.index) ? defaultDangerColor() : reachedStrokeColor()
         }
       });
     });
@@ -87,7 +87,7 @@ export class InstructionApplicationAnimation extends Animatable {
         { x: startX + (this.endX - startX) / 2 - this.resultItem!.width() / 2 },
         { duration: 0 }
       ),
-      this.controlInstrAnimation.animateRectTo({ stroke: defaultStrokeColor() }, animationConfig),
+      this.controlInstrAnimation.animateRectTo({ stroke: reachedStrokeColor() }, animationConfig),
       this.controlInstrAnimation.animateTo(
         {
           x: startX,
@@ -101,7 +101,7 @@ export class InstructionApplicationAnimation extends Animatable {
         animationConfig
       ),
       ...this.stashItemAnimations.map(a =>
-        a.animateRectTo({ stroke: defaultStrokeColor() }, animationConfig)
+        a.animateRectTo({ stroke: reachedStrokeColor() }, animationConfig)
       )
     ]);
     animationConfig = { ...animationConfig, delay: 0 };
diff --git a/src/features/cseMachine/animationComponents/LookupAnimation.tsx b/src/features/cseMachine/animationComponents/LookupAnimation.tsx
index eb3f72cd62..b850aa158b 100644
--- a/src/features/cseMachine/animationComponents/LookupAnimation.tsx
+++ b/src/features/cseMachine/animationComponents/LookupAnimation.tsx
@@ -10,9 +10,9 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import {
   defaultActiveColor,
   defaultDangerColor,
-  defaultStrokeColor,
   getTextWidth,
-  isStashItemInDanger
+  isStashItemInDanger,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedGenericArrow } from './base/AnimatedGenericArrow';
@@ -65,7 +65,7 @@ export class LookupAnimation extends Animatable {
       getTextWidth(this.nameItem.text) + ControlStashConfig.ControlItemTextPadding * 2;
     // move name item next to binding
     await Promise.all([
-      this.nameItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }, { duration: 1.2 }),
+      this.nameItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }, { duration: 1.2 }),
       this.nameItemAnimation.animateTo(
         {
           x: this.frame.x() - minNameItemWidth,
diff --git a/src/features/cseMachine/animationComponents/PopAnimation.tsx b/src/features/cseMachine/animationComponents/PopAnimation.tsx
index 92c028f683..3ec18bd106 100644
--- a/src/features/cseMachine/animationComponents/PopAnimation.tsx
+++ b/src/features/cseMachine/animationComponents/PopAnimation.tsx
@@ -4,7 +4,7 @@ import { Group } from 'react-konva';
 
 import { ControlItemComponent } from '../components/ControlItemComponent';
 import { StashItemComponent } from '../components/StashItemComponent';
-import { defaultActiveColor, defaultDangerColor, defaultStrokeColor } from '../CseMachineUtils';
+import { defaultActiveColor, defaultDangerColor, reachedStrokeColor } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedTextbox } from './base/AnimatedTextbox';
 import { getNodePosition } from './base/AnimationUtils';
@@ -57,9 +57,9 @@ export class PopAnimation extends Animatable {
   async animate() {
     this.undefinedStashItem?.ref.current?.hide();
     await Promise.all([
-      this.popItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }, { duration: 0.8 }),
+      this.popItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }, { duration: 0.8 }),
       this.popItemAnimation.animateTo({ ...getNodePosition(this.stashItem), opacity: 0 }),
-      this.stashItemAnimation.animateRectTo({ stroke: defaultStrokeColor() }, { delay: 0.3 }),
+      this.stashItemAnimation.animateRectTo({ stroke: reachedStrokeColor() }, { delay: 0.3 }),
       this.stashItemAnimation.animateTo({ scaleX: 0.6, scaleY: 0.6 }, { delay: 0.3 })
     ]);
     await Promise.all([
diff --git a/src/features/cseMachine/animationComponents/UnaryOperationAnimation.tsx b/src/features/cseMachine/animationComponents/UnaryOperationAnimation.tsx
index 6343346a7f..3859469656 100644
--- a/src/features/cseMachine/animationComponents/UnaryOperationAnimation.tsx
+++ b/src/features/cseMachine/animationComponents/UnaryOperationAnimation.tsx
@@ -7,9 +7,9 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import {
   defaultActiveColor,
   defaultDangerColor,
-  defaultStrokeColor,
   getTextWidth,
-  isStashItemInDanger
+  isStashItemInDanger,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { Animatable } from './base/Animatable';
 import { AnimatedTextbox } from './base/AnimatedTextbox';
@@ -65,13 +65,13 @@ export class UnaryOperationAnimation extends Animatable {
         },
         { duration: 0 }
       ),
-      this.operatorAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.operatorAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.operatorAnimation.animateTo({
         x: this.operand.x(),
         y: this.result.y(),
         width: minOpWidth
       }),
-      this.operandAnimation.animateRectTo({ stroke: defaultStrokeColor() }),
+      this.operandAnimation.animateRectTo({ stroke: reachedStrokeColor() }),
       this.operandAnimation.animateTo({
         x: this.operand.x() + minOpWidth
       })
diff --git a/src/features/cseMachine/animationComponents/base/AnimatedGenericArrow.tsx b/src/features/cseMachine/animationComponents/base/AnimatedGenericArrow.tsx
index 704444d927..2aa15b72be 100644
--- a/src/features/cseMachine/animationComponents/base/AnimatedGenericArrow.tsx
+++ b/src/features/cseMachine/animationComponents/base/AnimatedGenericArrow.tsx
@@ -5,7 +5,7 @@ import { SharedProperties } from 'src/commons/utils/TypeHelper';
 
 import { GenericArrow } from '../../components/arrows/GenericArrow';
 import { Visible } from '../../components/Visible';
-import { defaultStrokeColor, fadedStrokeColor } from '../../CseMachineUtils';
+import { defaultStrokeColor, reachedStrokeColor } from '../../CseMachineUtils';
 import { Animatable, AnimatableTo, AnimationConfig } from './Animatable';
 import { AnimatedArrowComponent, AnimatedPathComponent } from './AnimationComponents';
 
@@ -33,13 +33,13 @@ export class AnimatedGenericArrow<
     this._width = arrow.width();
     this._height = arrow.height();
     this.pathComponent = new AnimatedPathComponent({
-      stroke: arrow.faded ? fadedStrokeColor() : defaultStrokeColor(),
+      stroke: arrow.source.isReachable() ? reachedStrokeColor() : defaultStrokeColor(),
       data: arrow.path(),
       ...props
     });
     this.pathComponent.addListener(this.onPropsChange);
     this.arrowComponent = new AnimatedArrowComponent({
-      fill: arrow.faded ? fadedStrokeColor() : defaultStrokeColor(),
+      fill: arrow.source.isReachable() ? reachedStrokeColor() : defaultStrokeColor(),
       points: arrow.points.slice(arrow.points.length - 4),
       ...props
     });
diff --git a/src/features/cseMachine/animationComponents/base/AnimationComponents.tsx b/src/features/cseMachine/animationComponents/base/AnimationComponents.tsx
index b69420f81e..421a9876ef 100644
--- a/src/features/cseMachine/animationComponents/base/AnimationComponents.tsx
+++ b/src/features/cseMachine/animationComponents/base/AnimationComponents.tsx
@@ -6,7 +6,7 @@ import { Arrow, KonvaNodeComponent, Path, Rect, Text } from 'react-konva';
 import { CseAnimation } from '../../CseMachineAnimation';
 import { Config } from '../../CseMachineConfig';
 import { ControlStashConfig } from '../../CseMachineControlStashConfig';
-import { defaultStrokeColor, defaultTextColor } from '../../CseMachineUtils';
+import { reachedStrokeColor, reachedTextColor } from '../../CseMachineUtils';
 import { Animatable, AnimatableTo, AnimationConfig } from './Animatable';
 import { lerp } from './AnimationUtils';
 
@@ -171,7 +171,7 @@ export class AnimationComponent<
 export class AnimatedTextComponent extends AnimationComponent<Konva.Text, Konva.TextConfig> {
   constructor(props: Konva.TextConfig & Required<Pick<Konva.TextConfig, 'text'>>) {
     const defaultProps = {
-      fill: defaultTextColor(),
+      fill: reachedTextColor(),
       fontFamily: ControlStashConfig.FontFamily,
       fontSize: ControlStashConfig.FontSize,
       fontStyle: ControlStashConfig.FontStyle,
@@ -188,7 +188,7 @@ export class AnimatedTextComponent extends AnimationComponent<Konva.Text, Konva.
 export class AnimatedRectComponent extends AnimationComponent<Konva.Rect, Konva.RectConfig> {
   constructor(props: Konva.RectConfig) {
     const defaultProps = {
-      stroke: defaultStrokeColor(),
+      stroke: reachedStrokeColor(),
       cornerRadius: ControlStashConfig.ControlItemCornerRadius
     };
     super(Rect, { ...defaultProps, ...props });
@@ -198,7 +198,7 @@ export class AnimatedRectComponent extends AnimationComponent<Konva.Rect, Konva.
 export class AnimatedPathComponent extends AnimationComponent<Konva.Path, Konva.PathConfig> {
   constructor(props: Konva.PathConfig & Required<Pick<Konva.PathConfig, 'data'>>) {
     const defaultProps = {
-      stroke: defaultStrokeColor(),
+      stroke: reachedStrokeColor(),
       strokeWidth: Config.ArrowStrokeWidth
     };
     super(Path, { ...defaultProps, ...props });
@@ -208,7 +208,7 @@ export class AnimatedPathComponent extends AnimationComponent<Konva.Path, Konva.
 export class AnimatedArrowComponent extends AnimationComponent<Konva.Arrow, Konva.ArrowConfig> {
   constructor(props: Konva.ArrowConfig) {
     const defaultProps = {
-      fill: defaultStrokeColor(),
+      fill: reachedStrokeColor(),
       strokeEnabled: false,
       pointerWidth: Config.ArrowHeadSize
     };
diff --git a/src/features/cseMachine/components/ArrayEmptyUnit.tsx b/src/features/cseMachine/components/ArrayEmptyUnit.tsx
index 9fb9c16bb5..94c65c2c0c 100644
--- a/src/features/cseMachine/components/ArrayEmptyUnit.tsx
+++ b/src/features/cseMachine/components/ArrayEmptyUnit.tsx
@@ -3,7 +3,7 @@ import { Rect } from 'react-konva';
 
 import { ShapeDefaultProps } from '../CseMachineConfig';
 import { Layout } from '../CseMachineLayout';
-import { defaultStrokeColor, fadedStrokeColor } from '../CseMachineUtils';
+import { defaultStrokeColor, reachedStrokeColor } from '../CseMachineUtils';
 import { ArrayValue } from './values/ArrayValue';
 import { Visible } from './Visible';
 
@@ -29,7 +29,7 @@ export class ArrayEmptyUnit extends Visible {
         y={this.y()}
         width={this.width()}
         height={this.height()}
-        stroke={this.parent.isReferenced() ? defaultStrokeColor() : fadedStrokeColor()}
+        stroke={this.parent.isReachable() ? reachedStrokeColor() : defaultStrokeColor()}
         ref={this.ref}
       />
     );
diff --git a/src/features/cseMachine/components/ArrayNullUnit.tsx b/src/features/cseMachine/components/ArrayNullUnit.tsx
index 4fead96f2a..dee0a66801 100644
--- a/src/features/cseMachine/components/ArrayNullUnit.tsx
+++ b/src/features/cseMachine/components/ArrayNullUnit.tsx
@@ -3,7 +3,7 @@ import { Line as KonvaLine } from 'react-konva';
 
 import { Config, ShapeDefaultProps } from '../CseMachineConfig';
 import { Layout } from '../CseMachineLayout';
-import { defaultStrokeColor, fadedStrokeColor } from '../CseMachineUtils';
+import { defaultStrokeColor, reachedStrokeColor } from '../CseMachineUtils';
 import { ArrayUnit } from './ArrayUnit';
 import { Visible } from './Visible';
 
@@ -23,7 +23,7 @@ export class ArrayNullUnit extends Visible {
         {...ShapeDefaultProps}
         key={Layout.key++}
         points={[this.x(), this.y() + this.height(), this.x() + this.width(), this.y()]}
-        stroke={this.reference.parent.isReferenced() ? defaultStrokeColor() : fadedStrokeColor()}
+        stroke={this.reference.parent.isReachable() ? reachedStrokeColor() : defaultStrokeColor()}
         hitStrokeWidth={Config.DataHitStrokeWidth}
         ref={this.ref}
         listening={false}
diff --git a/src/features/cseMachine/components/ArrayUnit.tsx b/src/features/cseMachine/components/ArrayUnit.tsx
index 5ebbd04022..4b04551a33 100644
--- a/src/features/cseMachine/components/ArrayUnit.tsx
+++ b/src/features/cseMachine/components/ArrayUnit.tsx
@@ -9,8 +9,8 @@ import { Data } from '../CseMachineTypes';
 import {
   defaultStrokeColor,
   defaultTextColor,
-  fadedStrokeColor,
-  fadedTextColor
+  reachedStrokeColor,
+  reachedTextColor
 } from '../CseMachineUtils';
 import { ArrowFromArrayUnit } from './arrows/ArrowFromArrayUnit';
 import { GenericArrow } from './arrows/GenericArrow';
@@ -53,6 +53,7 @@ export class ArrayUnit extends Visible {
     this.isLastUnit = this.idx === this.parent.data.length - 1;
     this.value = Layout.createValue(this.data, this);
     this.isMainReference = this.value.references.length > 1;
+    this.setReachable(this.parent.isReachable());
   }
 
   showIndex() {
@@ -86,7 +87,7 @@ export class ArrayUnit extends Visible {
       fontFamily: defaultOptions.fontFamily,
       fontSize: defaultOptions.fontSize,
       fontStyle: defaultOptions.fontStyle,
-      fill: this.parent.isReferenced() ? defaultTextColor() : fadedTextColor(),
+      fill: this.isReachable() ? reachedTextColor() : defaultTextColor(),
       x: this.x(),
       y: this.y() - defaultOptions.fontSize - 4,
       width: this.width(),
@@ -102,7 +103,7 @@ export class ArrayUnit extends Visible {
           y={this.y()}
           width={this.width()}
           height={this.height()}
-          stroke={this.parent.isReferenced() ? defaultStrokeColor() : fadedStrokeColor()}
+          stroke={this.isReachable() ? reachedStrokeColor() : defaultStrokeColor()}
           hitStrokeWidth={Config.DataHitStrokeWidth}
           fillEnabled={true}
           cornerRadius={cornerRadius}
diff --git a/src/features/cseMachine/components/Binding.tsx b/src/features/cseMachine/components/Binding.tsx
index e2abdeb8d5..13900688b8 100644
--- a/src/features/cseMachine/components/Binding.tsx
+++ b/src/features/cseMachine/components/Binding.tsx
@@ -43,6 +43,7 @@ export class Binding extends Visible {
     readonly isConstant: boolean = false
   ) {
     super();
+
     this.isDummyBinding = isDummyKey(this.keyString);
 
     // derive the coordinates from the binding above it
diff --git a/src/features/cseMachine/components/ControlItemComponent.tsx b/src/features/cseMachine/components/ControlItemComponent.tsx
index 3f7327a77f..8acc26831c 100644
--- a/src/features/cseMachine/components/ControlItemComponent.tsx
+++ b/src/features/cseMachine/components/ControlItemComponent.tsx
@@ -9,9 +9,9 @@ import { Layout } from '../CseMachineLayout';
 import { IHoverable } from '../CseMachineTypes';
 import {
   defaultActiveColor,
-  defaultStrokeColor,
-  defaultTextColor,
   getTextHeight,
+  reachedStrokeColor,
+  reachedTextColor,
   setHoveredCursor,
   setHoveredStyle,
   setUnhoveredCursor,
@@ -98,7 +98,7 @@ export class ControlItemComponent extends Visible implements IHoverable {
 
   draw(): React.ReactNode {
     const textProps = {
-      fill: defaultTextColor(),
+      fill: reachedTextColor(),
       padding: ControlStashConfig.ControlItemTextPadding,
       fontFamily: ControlStashConfig.FontFamily,
       fontSize: ControlStashConfig.FontSize,
@@ -106,7 +106,7 @@ export class ControlItemComponent extends Visible implements IHoverable {
       fontVariant: ControlStashConfig.FontVariant
     };
     const tagProps = {
-      stroke: this.topItem ? defaultActiveColor() : defaultStrokeColor(),
+      stroke: this.topItem ? defaultActiveColor() : reachedStrokeColor(),
       cornerRadius: ControlStashConfig.ControlItemCornerRadius
     };
     return (
diff --git a/src/features/cseMachine/components/ControlStack.tsx b/src/features/cseMachine/components/ControlStack.tsx
index 01770ce3d1..661b2c0d60 100644
--- a/src/features/cseMachine/components/ControlStack.tsx
+++ b/src/features/cseMachine/components/ControlStack.tsx
@@ -12,9 +12,9 @@ import { ControlStashConfig } from '../CseMachineControlStashConfig';
 import { Layout } from '../CseMachineLayout';
 import { IHoverable } from '../CseMachineTypes';
 import {
-  defaultStrokeColor,
-  defaultTextColor,
   getControlItemComponent,
+  reachedStrokeColor,
+  reachedTextColor,
   setHoveredCursor,
   setHoveredStyle,
   setUnhoveredCursor,
@@ -110,14 +110,14 @@ export class ControlStack extends Visible implements IHoverable {
             }}
           >
             <Tag
-              stroke={defaultStrokeColor()}
+              stroke={reachedStrokeColor()}
               cornerRadius={ControlStashConfig.ControlItemCornerRadius}
             />
             <Text
               {...textProps}
               text={`${Config.Ellipsis}`}
               align="center"
-              fill={defaultTextColor()}
+              fill={reachedTextColor()}
               width={ControlStashConfig.ShowMoreButtonWidth}
               height={ControlStashConfig.ShowMoreButtonHeight}
             />
diff --git a/src/features/cseMachine/components/Frame.tsx b/src/features/cseMachine/components/Frame.tsx
index e632fd19f6..7d78aed51b 100644
--- a/src/features/cseMachine/components/Frame.tsx
+++ b/src/features/cseMachine/components/Frame.tsx
@@ -14,7 +14,8 @@ import {
   isClosure,
   isDataArray,
   isPrimitiveData,
-  isUnassigned
+  isUnassigned,
+  reachedStrokeColor
 } from '../CseMachineUtils';
 import { isContinuation } from '../utils/scheme';
 import { ArrowFromFrame } from './arrows/ArrowFromFrame';
@@ -168,10 +169,27 @@ export class Frame extends Visible implements IHoverable {
 
     this.totalHeight = this.height() + this.name.height() + Config.TextPaddingY / 2;
 
-    if (this.parentFrame) this.arrow = new ArrowFromFrame(this).to(this.parentFrame);
+    if (this.parentFrame) {
+      this.arrow = new ArrowFromFrame(this).to(this.parentFrame);
+    }
 
+    // mark as white recursively up to root parent
     if (CseMachine.getCurrentEnvId() === this.environment.id) {
       CseAnimation.setCurrentFrame(this);
+      this.setParentChainReachable();
+    }
+
+    console.log('frame constructor');
+
+
+  }
+
+  public setParentChainReachable(): void {
+    this.setReachable(true);
+    this.arrow?.setReachable(true);
+
+    if (this.parentFrame) {
+      this.parentFrame.setParentChainReachable();
     }
   }
 
@@ -180,6 +198,12 @@ export class Frame extends Visible implements IHoverable {
   onMouseLeave = () => {};
 
   draw(): React.ReactNode {
+
+    this.bindings.map(binding => binding.key.setReachable(this.isReachable()))
+    if (this.isReachable() && this.parentFrame) {
+      this.bindings.map(binding => binding.value.setReachable(true))
+    }
+
     return (
       <Group ref={this.ref} key={Layout.key++}>
         {this.name.draw()}
@@ -192,13 +216,17 @@ export class Frame extends Visible implements IHoverable {
           stroke={
             CseMachine.getCurrentEnvId() === this.environment?.id
               ? defaultActiveColor()
-              : defaultStrokeColor()
+              : this.isReachable()
+                ? reachedStrokeColor()
+                : defaultStrokeColor()
           }
           cornerRadius={Config.FrameCornerRadius}
           onMouseEnter={this.onMouseEnter}
           onMouseLeave={this.onMouseLeave}
           key={Layout.key++}
         />
+        {/* {this.bindings.map(binding => binding.key.setReachable(this.isReachable()))}
+        {this.isReachable() && this.parentFrame && this.bindings.map(binding => binding.value.setReachable(true))} */}
         {this.bindings.map(binding => binding.draw())}
         {this.arrow?.draw()}
       </Group>
diff --git a/src/features/cseMachine/components/StashItemComponent.tsx b/src/features/cseMachine/components/StashItemComponent.tsx
index b0d37e634c..cd9af82cc1 100644
--- a/src/features/cseMachine/components/StashItemComponent.tsx
+++ b/src/features/cseMachine/components/StashItemComponent.tsx
@@ -11,13 +11,13 @@ import { Layout } from '../CseMachineLayout';
 import { IHoverable } from '../CseMachineTypes';
 import {
   defaultDangerColor,
-  defaultStrokeColor,
-  defaultTextColor,
   getTextWidth,
   isDataArray,
   isNonGlobalFn,
   isSourceObject,
   isStashItemInDanger,
+  reachedStrokeColor,
+  reachedTextColor,
   setHoveredCursor,
   setHoveredStyle,
   setUnhoveredCursor,
@@ -79,7 +79,7 @@ export class StashItemComponent extends Visible implements IHoverable {
     this._x = ControlStashConfig.StashPosX + stackWidth;
     this._y = ControlStashConfig.StashPosY;
     if (arrowTo) {
-      arrowTo.markAsReferenced();
+      arrowTo.setReachable(true);
       this.arrow = new ArrowFromStashItemComponent(this).to(arrowTo) as ArrowFromStashItemComponent;
     }
   }
@@ -112,7 +112,7 @@ export class StashItemComponent extends Visible implements IHoverable {
 
   draw(): React.ReactNode {
     const textProps = {
-      fill: defaultTextColor(),
+      fill: reachedTextColor(),
       padding: ControlStashConfig.StashItemTextPadding,
       fontFamily: ControlStashConfig.FontFamily,
       fontSize: ControlStashConfig.FontSize,
@@ -120,7 +120,7 @@ export class StashItemComponent extends Visible implements IHoverable {
       fontVariant: ControlStashConfig.FontVariant
     };
     const tagProps = {
-      stroke: isStashItemInDanger(this.index) ? defaultDangerColor() : defaultStrokeColor(),
+      stroke: isStashItemInDanger(this.index) ? defaultDangerColor() : reachedStrokeColor(),
       cornerRadius: ControlStashConfig.StashItemCornerRadius
     };
     return (
diff --git a/src/features/cseMachine/components/Text.tsx b/src/features/cseMachine/components/Text.tsx
index d979391885..e070f6e1a1 100644
--- a/src/features/cseMachine/components/Text.tsx
+++ b/src/features/cseMachine/components/Text.tsx
@@ -9,9 +9,9 @@ import { Layout } from '../CseMachineLayout';
 import { Data, IHoverable } from '../CseMachineTypes';
 import {
   defaultTextColor,
-  fadedTextColor,
   getTextWidth,
   isSourceObject,
+  reachedTextColor,
   setHoveredCursor,
   setUnhoveredCursor
 } from '../CseMachineUtils';
@@ -103,7 +103,7 @@ export class Text extends Visible implements IHoverable {
       fontFamily: this.options.fontFamily,
       fontSize: this.options.fontSize,
       fontStyle: this.options.fontStyle,
-      fill: this.options.faded ? fadedTextColor() : defaultTextColor(),
+      fill: this.options.faded ? defaultTextColor() : reachedTextColor(),
       visible: !this.options.hidden
     };
     return (
diff --git a/src/features/cseMachine/components/Visible.tsx b/src/features/cseMachine/components/Visible.tsx
index d25336b63c..03e4079d7f 100644
--- a/src/features/cseMachine/components/Visible.tsx
+++ b/src/features/cseMachine/components/Visible.tsx
@@ -12,6 +12,8 @@ export abstract class Visible implements IVisible {
   protected _width: number = 0;
   protected _height: number = 0;
   protected _isDrawn: boolean = false;
+  protected _isReachable: boolean = false;
+
   x(): number {
     return this._x;
   }
@@ -30,6 +32,12 @@ export abstract class Visible implements IVisible {
   reset(): void {
     this._isDrawn = false;
   }
+  isReachable(): boolean {
+    return this._isReachable;
+  }
+  setReachable(isReachable: boolean): void {
+    this._isReachable = isReachable;
+  }
   public ref: RefObject<any> = React.createRef();
   abstract draw(key?: number): React.ReactNode;
 }
diff --git a/src/features/cseMachine/components/arrows/ArrowFromArrayUnit.tsx b/src/features/cseMachine/components/arrows/ArrowFromArrayUnit.tsx
index 83492003d2..1dad6cdf53 100644
--- a/src/features/cseMachine/components/arrows/ArrowFromArrayUnit.tsx
+++ b/src/features/cseMachine/components/arrows/ArrowFromArrayUnit.tsx
@@ -10,16 +10,14 @@ import { GenericArrow } from './GenericArrow';
 
 /** this class encapsulates an GenericArrow to be drawn between 2 points */
 export class ArrowFromArrayUnit extends GenericArrow<ArrayUnit, Value> {
-  constructor(from: ArrayUnit) {
-    super(from);
-    this.faded = !from.parent.isReferenced();
-  }
-
   protected calculateSteps() {
     const from = this.source;
     const to = this.target;
     if (!to) return [];
 
+    // set reachable to true if both source and target are reachable
+    this.setReachable(from.isReachable() && to.isReachable());
+
     const steps: StepsArray = [
       (x, y) => [x + Config.DataUnitWidth / 2, y + Config.DataUnitHeight / 2]
     ];
diff --git a/src/features/cseMachine/components/arrows/ArrowFromControlItemComponent.tsx b/src/features/cseMachine/components/arrows/ArrowFromControlItemComponent.tsx
index e29f0904f4..ce4c2c4732 100644
--- a/src/features/cseMachine/components/arrows/ArrowFromControlItemComponent.tsx
+++ b/src/features/cseMachine/components/arrows/ArrowFromControlItemComponent.tsx
@@ -12,9 +12,17 @@ export class ArrowFromControlItemComponent extends GenericArrow<
   ControlItemComponent,
   Frame | FnValue | GlobalFnValue | ContValue
 > {
+  constructor(from: ControlItemComponent) {
+    super(from);
+    this.setReachable(true);
+  }
+
   protected calculateSteps() {
     const from = this.source;
     const to = this.target;
+
+    to?.setReachable(true);
+
     if (!to) return [];
 
     const steps: StepsArray = [
diff --git a/src/features/cseMachine/components/arrows/ArrowFromFn.tsx b/src/features/cseMachine/components/arrows/ArrowFromFn.tsx
index d23701ffd6..f2d18defa5 100644
--- a/src/features/cseMachine/components/arrows/ArrowFromFn.tsx
+++ b/src/features/cseMachine/components/arrows/ArrowFromFn.tsx
@@ -10,14 +10,27 @@ import { GenericArrow } from './GenericArrow';
 export class ArrowFromFn extends GenericArrow<FnValue | GlobalFnValue | ContValue, Frame> {
   constructor(from: FnValue | GlobalFnValue | ContValue) {
     super(from);
-    this.faded = !from.isReferenced();
+    this.setReachable(from.isReachable());
   }
 
   protected calculateSteps() {
     const from = this.source;
     const to = this.target;
+
     if (!to) return [];
 
+    if (this.isReachable() && !to.isReachable()) {
+      console.log('setting to reachable...');
+
+      to.setParentChainReachable();
+    }
+
+    to.draw();
+    console.log('to', to.isReachable());
+    console.log(to);
+    
+
+
     const steps: StepsArray = [
       (x, y) =>
         this.source instanceof ContValue
diff --git a/src/features/cseMachine/components/arrows/ArrowFromFrame.tsx b/src/features/cseMachine/components/arrows/ArrowFromFrame.tsx
index 9f31781305..9629df7440 100644
--- a/src/features/cseMachine/components/arrows/ArrowFromFrame.tsx
+++ b/src/features/cseMachine/components/arrows/ArrowFromFrame.tsx
@@ -5,6 +5,7 @@ import { GenericArrow } from './GenericArrow';
 
 /** this class encapsulates an GenericArrow to be drawn between 2 points */
 export class ArrowFromFrame extends GenericArrow<Frame, Frame> {
+  // frame to frame arrow colouring done by Frame.tsx iteratively up to root parent
   protected calculateSteps() {
     const to = this.target;
     if (!to) return [];
diff --git a/src/features/cseMachine/components/arrows/ArrowFromStashItemComponent.tsx b/src/features/cseMachine/components/arrows/ArrowFromStashItemComponent.tsx
index 6e22b94b66..151a4d52c6 100644
--- a/src/features/cseMachine/components/arrows/ArrowFromStashItemComponent.tsx
+++ b/src/features/cseMachine/components/arrows/ArrowFromStashItemComponent.tsx
@@ -12,9 +12,18 @@ export class ArrowFromStashItemComponent extends GenericArrow<
   StashItemComponent,
   Frame | FnValue | GlobalFnValue | ArrayValue | ContValue
 > {
+  constructor(from: StashItemComponent) {
+    super(from);
+    this.setReachable(true);
+  }
+
   protected calculateSteps() {
     const from = this.source;
     const to = this.target;
+
+    //to?.setReachable(true);
+    console.log(to);
+
     if (!to) return [];
 
     const steps: StepsArray = [
diff --git a/src/features/cseMachine/components/arrows/ArrowFromText.tsx b/src/features/cseMachine/components/arrows/ArrowFromText.tsx
index a0416c7152..98e45fe324 100644
--- a/src/features/cseMachine/components/arrows/ArrowFromText.tsx
+++ b/src/features/cseMachine/components/arrows/ArrowFromText.tsx
@@ -7,11 +7,19 @@ import { GenericArrow } from './GenericArrow';
 
 /** this class encapsulates an GenericArrow to be drawn between 2 points */
 export class ArrowFromText extends GenericArrow<Text, Value> {
+  constructor(from: Text) {
+    super(from);
+  }
+
   protected calculateSteps() {
     const from = this.source;
     const to = this.target;
+
     if (!to) return [];
 
+    // set reachable to true if both source and target are reachable
+    this.setReachable(from.isReachable() && to.isReachable());
+
     const steps: StepsArray = [(x, y) => [x + from.width(), y + from.height() / 2]];
 
     if (to.x() < from.x()) {
diff --git a/src/features/cseMachine/components/arrows/GenericArrow.tsx b/src/features/cseMachine/components/arrows/GenericArrow.tsx
index 38786dfa1e..79dea3f969 100644
--- a/src/features/cseMachine/components/arrows/GenericArrow.tsx
+++ b/src/features/cseMachine/components/arrows/GenericArrow.tsx
@@ -3,7 +3,7 @@ import { Arrow as KonvaArrow, Group as KonvaGroup, Path as KonvaPath } from 'rea
 import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
 import { Layout } from '../../CseMachineLayout';
 import { IVisible, StepsArray } from '../../CseMachineTypes';
-import { defaultStrokeColor, fadedStrokeColor } from '../../CseMachineUtils';
+import { defaultStrokeColor, reachedStrokeColor } from '../../CseMachineUtils';
 import { Visible } from '../Visible';
 
 /** this class encapsulates an arrow to be drawn between 2 points */
@@ -12,7 +12,6 @@ export class GenericArrow<Source extends IVisible, Target extends IVisible> exte
   points: number[] = [];
   source: Source;
   target: Target | undefined;
-  faded: boolean = false;
 
   constructor(from: Source) {
     super();
@@ -94,7 +93,7 @@ export class GenericArrow<Source extends IVisible, Target extends IVisible> exte
   }
 
   draw() {
-    const stroke = this.faded ? fadedStrokeColor() : defaultStrokeColor();
+    const stroke = this.isReachable() ? reachedStrokeColor() : defaultStrokeColor();
     return (
       <KonvaGroup key={Layout.key++} ref={this.ref} listening={false}>
         <KonvaPath
diff --git a/src/features/cseMachine/components/values/ArrayValue.tsx b/src/features/cseMachine/components/values/ArrayValue.tsx
index 1726254c91..1c7cb220af 100644
--- a/src/features/cseMachine/components/values/ArrayValue.tsx
+++ b/src/features/cseMachine/components/values/ArrayValue.tsx
@@ -27,6 +27,8 @@ export class ArrayValue extends Value implements IHoverable {
     super();
     Layout.memoizeValue(data, this);
     this.addReference(firstReference);
+    console.log('arrayvalue constructor...');
+    console.log(firstReference);
   }
 
   handleNewReference(newReference: ReferenceType): void {
@@ -77,11 +79,13 @@ export class ArrayValue extends Value implements IHoverable {
     }
   }
 
-  markAsReferenced() {
-    if (this.isReferenced()) return;
-    super.markAsReferenced();
+  setReachable(reachable: boolean = true) {
+    if (this.isReachable()) return;
+    super.setReachable(reachable);
+    // Propagate reachability to all array units
     for (const unit of this.units) {
-      unit.value.markAsReferenced();
+      unit.setReachable(reachable);
+      unit.value.setReachable(reachable);
     }
   }
 
@@ -101,6 +105,8 @@ export class ArrayValue extends Value implements IHoverable {
 
   draw(): React.ReactNode {
     if (this.isDrawn()) return null;
+    console.log('drawingarray...');
+    console.log(this);
     this._isDrawn = true;
     return (
       <Group
diff --git a/src/features/cseMachine/components/values/ContValue.tsx b/src/features/cseMachine/components/values/ContValue.tsx
index 0e54531631..c94adfaeee 100644
--- a/src/features/cseMachine/components/values/ContValue.tsx
+++ b/src/features/cseMachine/components/values/ContValue.tsx
@@ -19,10 +19,10 @@ import { IHoverable, ReferenceType } from '../../CseMachineTypes';
 import {
   defaultStrokeColor,
   defaultTextColor,
-  fadedStrokeColor,
-  fadedTextColor,
   getTextWidth,
   isMainReference,
+  reachedStrokeColor,
+  reachedTextColor,
   setHoveredCursor,
   setUnhoveredCursor
 } from '../../CseMachineUtils';
@@ -116,8 +116,8 @@ export class ContValue extends Value implements IHoverable {
     if (this.enclosingFrame) {
       this._arrow = new ArrowFromFn(this).to(this.enclosingFrame) as ArrowFromFn;
     }
-    const textColor = this.isReferenced() ? defaultTextColor() : fadedTextColor();
-    const strokeColor = this.isReferenced() ? defaultStrokeColor() : fadedStrokeColor();
+    const textColor = this.isReachable() ? reachedTextColor() : defaultTextColor();
+    const strokeColor = this.isReachable() ? reachedStrokeColor() : defaultStrokeColor();
     return (
       <React.Fragment key={Layout.key++}>
         <Group onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} ref={this.ref}>
diff --git a/src/features/cseMachine/components/values/FnValue.tsx b/src/features/cseMachine/components/values/FnValue.tsx
index 3cc9f9637d..17b3e09788 100644
--- a/src/features/cseMachine/components/values/FnValue.tsx
+++ b/src/features/cseMachine/components/values/FnValue.tsx
@@ -16,13 +16,13 @@ import { IHoverable, NonGlobalFn, ReferenceType } from '../../CseMachineTypes';
 import {
   defaultStrokeColor,
   defaultTextColor,
-  fadedStrokeColor,
-  fadedTextColor,
   getBodyText,
   getParamsText,
   getTextWidth,
   isMainReference,
   isStreamFn,
+  reachedStrokeColor,
+  reachedTextColor,
   setHoveredCursor,
   setUnhoveredCursor
 } from '../../CseMachineUtils';
@@ -126,14 +126,22 @@ export class FnValue extends Value implements IHoverable {
   };
 
   draw(): React.ReactNode {
+    if (this.isDrawn()) return;
+    this._isDrawn = true;
+    
     if (this.fnName === undefined) {
       throw new Error('Closure has no main reference and is not initialised!');
     }
     if (this.enclosingFrame) {
       this._arrow = new ArrowFromFn(this).to(this.enclosingFrame) as ArrowFromFn;
+
+      if (this.isReachable()) {
+        this._arrow.setReachable(true);
+      }
+
     }
-    const textColor = this.isReferenced() ? defaultTextColor() : fadedTextColor();
-    const strokeColor = this.isReferenced() ? defaultStrokeColor() : fadedStrokeColor();
+    const textColor = this.isReachable() ? reachedTextColor() : defaultTextColor();
+    const strokeColor = this.isReachable() ? reachedStrokeColor() : defaultStrokeColor();
     return (
       <React.Fragment key={Layout.key++}>
         <Group onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} ref={this.ref}>
diff --git a/src/features/cseMachine/components/values/GlobalFnValue.tsx b/src/features/cseMachine/components/values/GlobalFnValue.tsx
index b4e4711802..939836e337 100644
--- a/src/features/cseMachine/components/values/GlobalFnValue.tsx
+++ b/src/features/cseMachine/components/values/GlobalFnValue.tsx
@@ -16,11 +16,11 @@ import { GlobalFn, IHoverable } from '../../CseMachineTypes';
 import {
   defaultStrokeColor,
   defaultTextColor,
-  fadedStrokeColor,
-  fadedTextColor,
   getBodyText,
   getParamsText,
   getTextWidth,
+  reachedStrokeColor,
+  reachedTextColor,
   setHoveredCursor,
   setUnhoveredCursor
 } from '../../CseMachineUtils';
@@ -106,8 +106,8 @@ export class GlobalFnValue extends Value implements IHoverable {
     if (Layout.globalEnvNode.frame) {
       this._arrow = new ArrowFromFn(this).to(Layout.globalEnvNode.frame) as ArrowFromFn;
     }
-    const textColor = this.isReferenced() ? defaultTextColor() : fadedTextColor();
-    const strokeColor = this.isReferenced() ? defaultStrokeColor() : fadedStrokeColor();
+    const textColor = this.isReachable() ? reachedTextColor() : defaultTextColor();
+    const strokeColor = this.isReachable() ? reachedStrokeColor() : defaultStrokeColor();
     return (
       <React.Fragment key={Layout.key++}>
         <Group onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} ref={this.ref}>
diff --git a/src/features/cseMachine/components/values/PrimitiveValue.tsx b/src/features/cseMachine/components/values/PrimitiveValue.tsx
index de012840f1..8064df65b5 100644
--- a/src/features/cseMachine/components/values/PrimitiveValue.tsx
+++ b/src/features/cseMachine/components/values/PrimitiveValue.tsx
@@ -61,10 +61,10 @@ export class PrimitiveValue extends Value {
       throw new Error('Primitive values cannot have more than one reference!');
   }
 
-  markAsReferenced() {
-    if (this.isReferenced()) return;
-    super.markAsReferenced();
-    if (this.text instanceof Text) this.text.options.faded = false;
+  setReachable(reachable: boolean = true) {
+    if (this.isReachable()) return;
+    super.setReachable(reachable);
+    if (this.text instanceof Text) this.text.options.faded = !reachable;
   }
 
   draw(): React.ReactNode {
diff --git a/src/features/cseMachine/components/values/Value.tsx b/src/features/cseMachine/components/values/Value.tsx
index 58262bcd8f..74cd0dc66f 100644
--- a/src/features/cseMachine/components/values/Value.tsx
+++ b/src/features/cseMachine/components/values/Value.tsx
@@ -9,19 +9,6 @@ export abstract class Value extends Visible {
   /** the underlying data of this value */
   abstract readonly data: Data;
 
-  /**
-   * if the value has actual references, i.e. the references
-   * are not from dummy bindings or from unreferenced arrays
-   */
-  private _isReferenced: boolean = false;
-
-  isReferenced() {
-    return this._isReferenced;
-  }
-
-  markAsReferenced() {
-    this._isReferenced = true;
-  }
 
   /** references to this value */
   public references: ReferenceType[] = [];
@@ -30,8 +17,8 @@ export abstract class Value extends Visible {
   addReference(newReference: ReferenceType): void {
     this.references.push(newReference);
     this.handleNewReference(newReference);
-    if (!this.isReferenced() && !isDummyReference(newReference)) {
-      this.markAsReferenced();
+    if (!this.isReachable() && !isDummyReference(newReference)) {
+      this.setReachable(true);
     }
   }
 
diff --git a/src/features/cseMachine/java/components/Arrow.tsx b/src/features/cseMachine/java/components/Arrow.tsx
index c3ed35fb08..e0a837947f 100644
--- a/src/features/cseMachine/java/components/Arrow.tsx
+++ b/src/features/cseMachine/java/components/Arrow.tsx
@@ -5,7 +5,7 @@ import { Visible } from '../../components/Visible';
 import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
 import { IHoverable } from '../../CseMachineTypes';
 import {
-  defaultStrokeColor,
+  reachedStrokeColor,
   setHoveredCursor,
   setHoveredStyle,
   setUnhoveredCursor,
@@ -47,7 +47,7 @@ export class Arrow extends Visible implements IHoverable {
       >
         <KonvaPath
           {...ShapeDefaultProps}
-          stroke={defaultStrokeColor()}
+          stroke={reachedStrokeColor()}
           strokeWidth={Config.ArrowStrokeWidth}
           hitStrokeWidth={Config.ArrowHitStrokeWidth}
           data={path}
@@ -56,7 +56,7 @@ export class Arrow extends Visible implements IHoverable {
         <KonvaArrow
           {...ShapeDefaultProps}
           points={this._points.slice(this._points.length - 4)}
-          fill={defaultStrokeColor()}
+          fill={reachedStrokeColor()}
           strokeEnabled={false}
           pointerWidth={Config.ArrowHeadSize}
           pointerLength={Config.ArrowHeadSize}
diff --git a/src/features/cseMachine/java/components/Control.tsx b/src/features/cseMachine/java/components/Control.tsx
index dcce409585..da841f8ac2 100644
--- a/src/features/cseMachine/java/components/Control.tsx
+++ b/src/features/cseMachine/java/components/Control.tsx
@@ -3,7 +3,7 @@ import { Group } from 'react-konva';
 
 import { Visible } from '../../components/Visible';
 import { ControlStashConfig } from '../../CseMachineControlStashConfig';
-import { defaultActiveColor, defaultStrokeColor } from '../../CseMachineUtils';
+import { defaultActiveColor, reachedStrokeColor } from '../../CseMachineUtils';
 import { CseMachine } from '../CseMachine';
 import { ControlItem } from './ControlItem';
 
@@ -26,7 +26,7 @@ export class Control extends Visible {
       const controlItemText = this.getControlItemString(controlItem);
 
       const controlItemStroke =
-        index === control.getStack().length - 1 ? defaultActiveColor() : defaultStrokeColor();
+        index === control.getStack().length - 1 ? defaultActiveColor() : reachedStrokeColor();
 
       // TODO reference draw ltr?
       const controlItemReference =
diff --git a/src/features/cseMachine/java/components/ControlItem.tsx b/src/features/cseMachine/java/components/ControlItem.tsx
index 89f777a7e4..0d88f8d95e 100644
--- a/src/features/cseMachine/java/components/ControlItem.tsx
+++ b/src/features/cseMachine/java/components/ControlItem.tsx
@@ -8,8 +8,8 @@ import { ControlStashConfig } from '../../CseMachineControlStashConfig';
 import { IHoverable } from '../../CseMachineTypes';
 import {
   defaultActiveColor,
-  defaultTextColor,
   getTextHeight,
+  reachedTextColor,
   setHoveredCursor,
   setHoveredStyle,
   setUnhoveredCursor,
@@ -93,7 +93,7 @@ export class ControlItem extends Visible implements IHoverable {
 
   draw(): React.ReactNode {
     const textProps = {
-      fill: defaultTextColor(),
+      fill: reachedTextColor(),
       padding: ControlStashConfig.ControlItemTextPadding,
       fontFamily: ControlStashConfig.FontFamily,
       fontSize: ControlStashConfig.FontSize,
diff --git a/src/features/cseMachine/java/components/Environment.tsx b/src/features/cseMachine/java/components/Environment.tsx
index aaf27caabf..f1e04b142c 100644
--- a/src/features/cseMachine/java/components/Environment.tsx
+++ b/src/features/cseMachine/java/components/Environment.tsx
@@ -4,7 +4,7 @@ import { Group } from 'react-konva';
 import { Visible } from '../../components/Visible';
 import { Config } from '../../CseMachineConfig';
 import { ControlStashConfig } from '../../CseMachineControlStashConfig';
-import { defaultActiveColor, defaultStrokeColor } from '../../CseMachineUtils';
+import { defaultActiveColor, reachedStrokeColor } from '../../CseMachineUtils';
 import { CseMachine } from '../CseMachine';
 import { Arrow } from './Arrow';
 import { Frame } from './Frame';
@@ -39,7 +39,7 @@ export class Environment extends Visible {
         let parentFrame;
         while (currEnv) {
           const stroke =
-            currEnv === environment.current ? defaultActiveColor() : defaultStrokeColor();
+            currEnv === environment.current ? defaultActiveColor() : reachedStrokeColor();
           const frame = new Frame(currEnv, methodFramesX, methodFramesY, stroke);
           this._methodFrames.push(frame);
           methodFramesY += frame.height() + Config.FramePaddingY;
@@ -70,7 +70,7 @@ export class Environment extends Visible {
 
       // Create frame top-down.
       while (env) {
-        const stroke = env === environment.current ? defaultActiveColor() : defaultStrokeColor();
+        const stroke = env === environment.current ? defaultActiveColor() : reachedStrokeColor();
         const frame = new Frame(env, objectFramesX, objectFramesY, stroke);
         // No padding btwn obj frames thus no arrows required.
         objectFramesY += frame.height();
@@ -97,7 +97,7 @@ export class Environment extends Visible {
     for (const c of environment.global.frame.values()) {
       const classEnv = (c as ECE.Class).frame;
       const classFrameStroke =
-        classEnv === environment.current ? defaultActiveColor() : defaultStrokeColor();
+        classEnv === environment.current ? defaultActiveColor() : reachedStrokeColor();
       const highlightOnHover = () => {
         const node = (c as ECE.Class).classDecl;
         let start = -1;
diff --git a/src/features/cseMachine/java/components/Frame.tsx b/src/features/cseMachine/java/components/Frame.tsx
index ef4d61567b..0553847f4b 100644
--- a/src/features/cseMachine/java/components/Frame.tsx
+++ b/src/features/cseMachine/java/components/Frame.tsx
@@ -7,7 +7,7 @@ import { Visible } from '../../components/Visible';
 import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
 import { ControlStashConfig } from '../../CseMachineControlStashConfig';
 import { IHoverable } from '../../CseMachineTypes';
-import { defaultTextColor, setHoveredCursor, setUnhoveredCursor } from '../../CseMachineUtils';
+import { reachedTextColor, setHoveredCursor, setUnhoveredCursor } from '../../CseMachineUtils';
 import { CseMachine } from '../CseMachine';
 import { Arrow } from './Arrow';
 import { Binding } from './Binding';
@@ -92,7 +92,7 @@ export class Frame extends Visible implements IHoverable {
 
   draw(): React.ReactNode {
     const textProps = {
-      fill: defaultTextColor(),
+      fill: reachedTextColor(),
       padding: Number(ControlStashConfig.ControlItemTextPadding),
       fontFamily: ControlStashConfig.FontFamily.toString(),
       fontSize: Number(ControlStashConfig.FontSize),
diff --git a/src/features/cseMachine/java/components/Line.tsx b/src/features/cseMachine/java/components/Line.tsx
index 6767aafa8f..4d3861e4f9 100644
--- a/src/features/cseMachine/java/components/Line.tsx
+++ b/src/features/cseMachine/java/components/Line.tsx
@@ -5,7 +5,7 @@ import { Visible } from '../../components/Visible';
 import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
 import { IHoverable } from '../../CseMachineTypes';
 import {
-  defaultStrokeColor,
+  reachedStrokeColor,
   setHoveredCursor,
   setHoveredStyle,
   setUnhoveredCursor,
@@ -47,7 +47,7 @@ export class Line extends Visible implements IHoverable {
       >
         <Path
           {...ShapeDefaultProps}
-          stroke={defaultStrokeColor()}
+          stroke={reachedStrokeColor()}
           strokeWidth={Number(Config.ArrowStrokeWidth)}
           hitStrokeWidth={Number(Config.ArrowHitStrokeWidth)}
           data={path}
diff --git a/src/features/cseMachine/java/components/Method.tsx b/src/features/cseMachine/java/components/Method.tsx
index cfd3d60d53..8c3a5328ce 100644
--- a/src/features/cseMachine/java/components/Method.tsx
+++ b/src/features/cseMachine/java/components/Method.tsx
@@ -8,10 +8,10 @@ import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
 import { ControlStashConfig } from '../../CseMachineControlStashConfig';
 import { IHoverable } from '../../CseMachineTypes';
 import {
-  defaultStrokeColor,
-  defaultTextColor,
   getTextHeight,
   getTextWidth,
+  reachedStrokeColor,
+  reachedTextColor,
   setHoveredCursor,
   setUnhoveredCursor
 } from '../../CseMachineUtils';
@@ -77,7 +77,7 @@ export class Method extends Visible implements IHoverable {
             x={this._centerX - Config.FnRadius}
             y={this.y()}
             radius={Config.FnRadius}
-            stroke={defaultStrokeColor()}
+            stroke={reachedStrokeColor()}
           />
           {/* Left inner */}
           <Circle
@@ -86,7 +86,7 @@ export class Method extends Visible implements IHoverable {
             x={this._centerX - Config.FnRadius}
             y={this.y()}
             radius={Config.FnInnerRadius}
-            fill={defaultStrokeColor()}
+            fill={reachedStrokeColor()}
           />
         </Group>
 
@@ -109,7 +109,7 @@ export class Method extends Visible implements IHoverable {
             fontFamily={ControlStashConfig.FontFamily}
             fontSize={ControlStashConfig.FontSize}
             fontStyle={ControlStashConfig.FontStyle}
-            fill={defaultTextColor()}
+            fill={reachedTextColor()}
             padding={5}
             key={CseMachine.key++}
           />
diff --git a/src/features/cseMachine/java/components/Stash.tsx b/src/features/cseMachine/java/components/Stash.tsx
index c0847a44a1..933228b81d 100644
--- a/src/features/cseMachine/java/components/Stash.tsx
+++ b/src/features/cseMachine/java/components/Stash.tsx
@@ -4,7 +4,7 @@ import { Group } from 'react-konva';
 
 import { Visible } from '../../components/Visible';
 import { ControlStashConfig } from '../../CseMachineControlStashConfig';
-import { defaultTextColor } from '../../CseMachineUtils';
+import { reachedTextColor } from '../../CseMachineUtils';
 import { CseMachine } from '../CseMachine';
 import { Method } from './Method';
 import { StashItem } from './StashItem';
@@ -24,7 +24,7 @@ export class Stash extends Visible {
     let stashItemX: number = this._x;
     for (const stashItem of stash.getStack()) {
       const stashItemText = this.getStashItemString(stashItem);
-      const stashItemStroke = defaultTextColor();
+      const stashItemStroke = reachedTextColor();
       const stashItemReference = this.getStashItemRef(stashItem);
       const currStashItem = new StashItem(
         stashItemX,
diff --git a/src/features/cseMachine/java/components/StashItem.tsx b/src/features/cseMachine/java/components/StashItem.tsx
index 927631f2fc..e981e4ba6b 100644
--- a/src/features/cseMachine/java/components/StashItem.tsx
+++ b/src/features/cseMachine/java/components/StashItem.tsx
@@ -9,7 +9,7 @@ import {
 import { Visible } from '../../components/Visible';
 import { ShapeDefaultProps } from '../../CseMachineConfig';
 import { ControlStashConfig } from '../../CseMachineControlStashConfig';
-import { defaultTextColor, getTextWidth } from '../../CseMachineUtils';
+import { getTextWidth, reachedTextColor } from '../../CseMachineUtils';
 import { CseMachine } from '../CseMachine';
 import { Arrow } from './Arrow';
 import { Frame } from './Frame';
@@ -54,7 +54,7 @@ export class StashItem extends Visible {
 
   draw(): React.ReactNode {
     const textProps = {
-      fill: defaultTextColor(),
+      fill: reachedTextColor(),
       padding: ControlStashConfig.StashItemTextPadding,
       fontFamily: ControlStashConfig.FontFamily,
       fontSize: ControlStashConfig.FontSize,
diff --git a/src/features/cseMachine/java/components/Text.tsx b/src/features/cseMachine/java/components/Text.tsx
index b88d8c3c5b..bb198f2837 100644
--- a/src/features/cseMachine/java/components/Text.tsx
+++ b/src/features/cseMachine/java/components/Text.tsx
@@ -3,7 +3,7 @@ import { Group as KonvaGroup, Label as KonvaLabel, Text as KonvaText } from 'rea
 
 import { Visible } from '../../components/Visible';
 import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
-import { defaultTextColor, getTextWidth } from '../../CseMachineUtils';
+import { getTextWidth, reachedTextColor } from '../../CseMachineUtils';
 import { CseMachine } from '../CseMachine';
 
 /** this class encapsulates a string to be drawn onto the canvas */
@@ -37,7 +37,7 @@ export class Text extends Visible {
       fontFamily: Config.FontFamily,
       fontSize: Config.FontSize,
       fontStyle: Config.FontStyle,
-      fill: defaultTextColor()
+      fill: reachedTextColor()
     };
 
     return (
diff --git a/src/features/cseMachine/java/components/Variable.tsx b/src/features/cseMachine/java/components/Variable.tsx
index 4d42365453..28fb84b4e9 100644
--- a/src/features/cseMachine/java/components/Variable.tsx
+++ b/src/features/cseMachine/java/components/Variable.tsx
@@ -4,7 +4,7 @@ import { Group, Rect } from 'react-konva';
 
 import { Visible } from '../../components/Visible';
 import { Config, ShapeDefaultProps } from '../../CseMachineConfig';
-import { defaultTextColor } from '../../CseMachineUtils';
+import { reachedTextColor } from '../../CseMachineUtils';
 import { CseMachine } from '../CseMachine';
 import { Arrow } from './Arrow';
 import { Text } from './Text';
@@ -98,7 +98,7 @@ export class Variable extends Visible {
           y={this._y + this._type.height()}
           width={this._width}
           height={this._height - this._type.height()}
-          stroke={defaultTextColor()}
+          stroke={reachedTextColor()}
           key={CseMachine.key++}
         />